Страницы

Поиск по вопросам

Показаны сообщения с ярлыком opacity. Показать все сообщения
Показаны сообщения с ярлыком opacity. Показать все сообщения

понедельник, 24 февраля 2020 г.

При восстановлении размера формы, элементы грузятся вконце

#c_sharp #winforms #opacity


Имеется 2 формы, одна из которых является формой заполненной одной картинкой (Form3),
вторая (Form1) - мейн. При нажатии на кнопку в Form1 - мейн сворачивается таким образом,
открывая F3:

Form3 formButton = new Form3();
formButton.Owner = this;
formButton.Show();
formButton.Opacity = 0;
while (this.Opacity != 0)
{
    Thread.Sleep(30);
    this.Opacity -= 0.1;
}


while (formButton.Opacity != 1)
{
    Thread.Sleep(30);
    formButton.Opacity += 0.1;
}


Проблема в том, что при появлении, пока выполняется цикл, на форме нет ничего, кроме
дырок от элементов. Сами элементы загружаются только когда программа выходит из цикла.

Вот обратное возвращение мейна:

formMain.Opacity = 0;
formMain.Show();
while (formMain.Opacity != 1)
{
    Thread.Sleep(30);
    formMain.Opacity += 0.1;
}
while (this.Opacity != 0)
{
    Thread.Sleep(30);
    this.Opacity -= 0.1;
}


Может есть у кого простое или не очень решение этой проблемы. Хотелось бы чтобы весь
интерфейс появлялся плавно, а не только форма, и по окончанию мгновенно элементы.
    


Ответы

Ответ 1



Как уже сказано в комментариях, циклы while c Thread.Sleep внутри работают в потоке GUI, что приводит к "замерзанию" формы. Давайте сделаем это с помощью таймера. Таймеров в дотнете имеется несколько штук разных, нам понадобится тот, который в пространстве имён System.Windows.Forms.Timer - он может работать с контролами на форме напрямую, так как его событие Tick вызывается в том же потоке. Добавьте в класс вашей основной формы два поля: System.Windows.Forms.Timer timer; Form3 formButton; И обработчик события таймера: private void Timer_Tick(object sender, EventArgs e) { if (Opacity > 0) this.Opacity -= 0.1; else if (formButton.Opacity < 1) formButton.Opacity += 0.1; else { timer.Stop(); timer.Tick -= Timer_Tick; } } Теперь ваш код будет выглядеть следующим образом: formButton = new Form3(); formButton.Owner = this; formButton.Show(); formButton.Opacity = 0; timer = new System.Windows.Forms.Timer(); timer.Interval = 30; timer.Tick += Timer_Tick; timer.Start(); Обратите внимание, что свойство Opacity формы имеет тип double. Поэтому я заменил точные сравнения != 0 и != 1 на > 0 и < 1 - это связано со спецификой представления вещественных чисел - точное сравнение может не сработать. Также обратите внимание на необходимость отписки таймера от события: timer.Tick -= Timer_Tick; - это необходимо, чтобы избежать утечки памяти. При желании, таймер можно создать в дизайнере формы, задав ему необходимые свойства и события.

суббота, 4 января 2020 г.

Затемнение/засветление у разных объектов в одном блоке

#css #html5 #css3 #opacity


Как затемнить или засветлить фон так, чтобы при этом текст, который находится на
фоне, не подлежал изменению?


    


Ответы

Ответ 1



1. Если речь идет о том случае, когда фон - это изображение, то прозрачность влияет на весь элемент, включая его содержание, и нет никакого способа изменить это поведение. Вы можете обойти эту проблему двумя следующими способами: "Запасной" ДИВ Добавьте еще один элемент DIV в контейнер для хранения фона. Это самый кроссбраузерный дружественный метод и будет работать даже на IE6.
I am a transparent image
.myDiv { position: relative; z-index: 5; height: 300px; width: 700px; color: #000; font-size: 400%; padding: 20px; margin-top: 40px; font-family: Arial; text-transform: capitalize; } .myDiv .bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #ccc url('https://images.unsplash.com/photo-1436564989038-18b9958df72b?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') center center; opacity: .4; width: 100%; height: 100%; } Псевдоэлементы :before и ::before Можно добавить псевдоэлемент, у которого будет добавлен фон и прозрачность.

Free Beautiful Photo

.container{ width: 700px; max-width: 100%; height: 200px; display: block; position: relative; } .container:before { content: ""; background: green url('https://images.unsplash.com/photo-1438755582627-221038b62986?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') 0 0 no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } .sign{ position: absolute; top: 50%; left: 50%; margin-left: -124px; transform: translateY(-50%); } .sign p{ font-size: 20px; text-transform: uppercase; color: green; font-weight: bold; font-family: Arial; } Дополнительные замечания Из-за поведения z-index вам придется установить z-index для контейнера, а также отрицательный z-index для фонового изображения. Ответ на этот вопрос уже давался на stackoverflow на английском. Там же есть код и ссылки на jsfiddle. Ссылка на ответ Еще один источник на английском языке Мой тестовый JSFiddle 2. Если речь идет о случае, когда фон - это просто какой-либо цвет, прозрачность которого нужно изменить то используйте CSS-свойство backround-color: rgba(0, 0, 0, 0.5); Ответ на такой вопрос на stackoverflow in english

четверг, 26 декабря 2019 г.

Плавное изменение прозрачности при прокрутке

#jquery #css3 #javascript #opacity #веб_программирование


Сделал для сайта кнопку "наверх", и хочу что бы она плавно появлялась при прокрутке
страницы вниз (как в ВК), но что бы её прозрачность зависела он расстояния прокрутки.
Получился такой код:



var h = window.outerHeight,
    t = window.innerHeight,
    r = 0;
$(window).scroll(function() {
  r = $(window).scrollTop() - t;
  if (r > getDocumentHeight() - 200) {
    $('#ToTop').css({
      opacity: 1
    });
    $('#ToTop').css({
      display: 'block'
    });
  }
  if (r > 0) {
    var op = r / 1000;
    $('#ToTop').css({
      opacity: op
    });
    $('#ToTop').css({
      display: 'block'
    });
  } else $('#ToTop').css({
    display: 'none'
  });
});




Но проблема в том, что цифры прозрачности в CSS то меняются, а вот сама кнопка изменяется
только при остановке прокрутки страницы.
На пример кнопка "Вверх" в вк меняет прозрачность именно в процессе прокрутки.
Подскажите как такое можно реализовать.
    


Ответы

Ответ 1



var wnd = $(window), opacityControl = $('div'); wnd.scroll(function(){ var top = wnd.scrollTop(), opacity = top > 500 ? 1 : top * 2 / 1000; opacityControl.css('opacity', opacity); }); div{ opacity:0; height:1500px; background:#333; }
opacity block


пятница, 31 мая 2019 г.

Затемнение/засветление у разных объектов в одном блоке

Как затемнить или засветлить фон так, чтобы при этом текст, который находится на фоне, не подлежал изменению?


Ответ

1. Если речь идет о том случае, когда фон - это изображение, то прозрачность влияет на весь элемент, включая его содержание, и нет никакого способа изменить это поведение. Вы можете обойти эту проблему двумя следующими способами:
"Запасной" ДИВ
Добавьте еще один элемент DIV в контейнер для хранения фона. Это самый кроссбраузерный дружественный метод и будет работать даже на IE6.

I am a transparent image

.myDiv { position: relative; z-index: 5; height: 300px; width: 700px; color: #000; font-size: 400%; padding: 20px; margin-top: 40px; font-family: Arial; text-transform: capitalize; }
.myDiv .bg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #ccc url('https://images.unsplash.com/photo-1436564989038-18b9958df72b?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') center center; opacity: .4; width: 100%; height: 100%; }
Псевдоэлементы :before и ::before
Можно добавить псевдоэлемент, у которого будет добавлен фон и прозрачность.

Free Beautiful Photo


.container{ width: 700px; max-width: 100%; height: 200px; display: block; position: relative; }
.container:before { content: ""; background: green url('https://images.unsplash.com/photo-1438755582627-221038b62986?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375') 0 0 no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
.sign{ position: absolute; top: 50%; left: 50%; margin-left: -124px; transform: translateY(-50%); }
.sign p{ font-size: 20px; text-transform: uppercase; color: green; font-weight: bold; font-family: Arial; }
Дополнительные замечания
Из-за поведения z-index вам придется установить z-index для контейнера, а также отрицательный z-index для фонового изображения.
Ответ на этот вопрос уже давался на stackoverflow на английском. Там же есть код и ссылки на jsfiddle. Ссылка на ответ
Еще один источник на английском языке
Мой тестовый JSFiddle
2. Если речь идет о случае, когда фон - это просто какой-либо цвет, прозрачность которого нужно изменить то используйте CSS-свойство backround-color: rgba(0, 0, 0, 0.5);
Ответ на такой вопрос на stackoverflow in english

четверг, 2 мая 2019 г.

При восстановлении размера формы, элементы грузятся вконце

Имеется 2 формы, одна из которых является формой заполненной одной картинкой (Form3), вторая (Form1) - мейн. При нажатии на кнопку в Form1 - мейн сворачивается таким образом, открывая F3:
Form3 formButton = new Form3(); formButton.Owner = this; formButton.Show(); formButton.Opacity = 0; while (this.Opacity != 0) { Thread.Sleep(30); this.Opacity -= 0.1; }
while (formButton.Opacity != 1) { Thread.Sleep(30); formButton.Opacity += 0.1; }
Проблема в том, что при появлении, пока выполняется цикл, на форме нет ничего, кроме дырок от элементов. Сами элементы загружаются только когда программа выходит из цикла.
Вот обратное возвращение мейна:
formMain.Opacity = 0; formMain.Show(); while (formMain.Opacity != 1) { Thread.Sleep(30); formMain.Opacity += 0.1; } while (this.Opacity != 0) { Thread.Sleep(30); this.Opacity -= 0.1; }
Может есть у кого простое или не очень решение этой проблемы. Хотелось бы чтобы весь интерфейс появлялся плавно, а не только форма, и по окончанию мгновенно элементы.


Ответ

Как уже сказано в комментариях, циклы while c Thread.Sleep внутри работают в потоке GUI, что приводит к "замерзанию" формы.
Давайте сделаем это с помощью таймера.
Таймеров в дотнете имеется несколько штук разных, нам понадобится тот, который в пространстве имён System.Windows.Forms.Timer - он может работать с контролами на форме напрямую, так как его событие Tick вызывается в том же потоке.
Добавьте в класс вашей основной формы два поля:
System.Windows.Forms.Timer timer; Form3 formButton;
И обработчик события таймера:
private void Timer_Tick(object sender, EventArgs e) { if (Opacity > 0) this.Opacity -= 0.1; else if (formButton.Opacity < 1) formButton.Opacity += 0.1; else { timer.Stop(); timer.Tick -= Timer_Tick; } }
Теперь ваш код будет выглядеть следующим образом:
formButton = new Form3(); formButton.Owner = this; formButton.Show(); formButton.Opacity = 0;
timer = new System.Windows.Forms.Timer(); timer.Interval = 30; timer.Tick += Timer_Tick; timer.Start();
Обратите внимание, что свойство Opacity формы имеет тип double. Поэтому я заменил точные сравнения != 0 и != 1 на > 0 и < 1 - это связано со спецификой представления вещественных чисел - точное сравнение может не сработать.
Также обратите внимание на необходимость отписки таймера от события: timer.Tick -= Timer_Tick; - это необходимо, чтобы избежать утечки памяти.
При желании, таймер можно создать в дизайнере формы, задав ему необходимые свойства и события.