Создание затухающего изображения в JavaScript путем изменения непрозрачности в течение определенного периода времени - PullRequest
Новая
       47

Создание затухающего изображения в JavaScript путем изменения непрозрачности в течение определенного периода времени

0 голосов
/ 22 января 2019

Я новичок в JavaScript.Я действительно заинтригован, чтобы найти простую технику для изменения непрозрачности изображения, лежащего поверх другого изображения, чтобы постепенно показать это нижнее изображение.Я хочу сделать это, исчезнув.Другими словами, вычитая из свойства style.opacity постепенно, после того, как проходит каждая секунда со временем.

Я пришел к следующему, но мне кажется, что оно не работает.

Текущее состояниеиз моего кода изменения непрозрачности внезапно переходят от 1 к негативам (-0,1, -0,2, -0,3 и т. д.).Который в основном делает переход от верхнего изображения сразу к раскрытию нижнего.

Я хочу постепенно переходить от непрозрачности 1 к (0,9, 0,8, 0,7 и т. Д.) С каждой секундой.

Я хочу сделать это на чистом JavaScript.Я нашел нечто подобное в CSS, но я не хочу использовать этот подход.

Я предполагаю, что (var currentOp = document.getElementById('guitar2').style.opacity;) обрабатывает переменную currentOp как строку.Из-за этого я попробовал комбинацию синтаксического анализа, чтобы плавать, делая вычитание и изменяя обратно на строку, устанавливая непрозрачность постепенно с течением времени, чтобы ничего не получилось.

<!DOCTYPE>
<html>
<head>
    <style>
    #guitar1
    {
        position: relative;
        top: 0;
        left: 0;
    }

    #guitar2
    {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    </style>
</head>
<body onload="runTime()">
    <script>

        var timer;

        function reduceOpacity()
        {
            var op = document.getElementById('guitar2');
            var currentOp = document.getElementById('guitar2').style.opacity;
            //currentOp = (parseFloat(currentOp) -  0.1).toString();
            currentOp -= 0.1;
            op.style.opacity = currentOp;
        }

        function runTime() 
        {
            timer = setInterval(reduceOpacity, 1000);
        }

    </script>
    <h4 id="header">Gibson Les Paul</h4>
    <div style="position: relative; left: 0; top: 0;">
        <img src="gibson1.png" id="guitar1" width="500" />
        <img src="gibson2.png" id="guitar2" width="500" />
    </div>
    <button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 января 2019


У меня есть альтернатива, если ваше сердце не настроено на JavaScript.Animate.css - это невероятная таблица стилей, которая будет делать то же самое намного проще.(Плюс это чистый CSS, намного лучше и более равномерная поддержка)

Импортируйте это в голову 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

Тогда вот ваш соответствующий код: 

   <div style="position: relative; left: 0; top: 0;">
    <img src="gibson1.png" id="guitar1"  width="500" />
    <img src="gibson2.png" id="guitar2" class="animated fadeOut delay-5s" style="animation-duration: 3s;" width="500" />
</div>

Майэто не совсем тот ответ, который вы ищете, но сделать это намного проще, чем анимацию JS + JQ.

Всего наилучшего!

0 голосов
/ 22 января 2019

Используйте getComputedStyle и getPropertyValue для получения точного представления стиля элемента при загрузке.

style.property имеет привычку не обновляться, иногда необъяснимым образом извлекает значения по умолчанию, имногие значения не могут быть получены, пока они не установлены.Если вы console.log(op.style.opacity) в своем исходном примере увидите, что он вытягивает пустую строку, а затем отсчитывает оттуда после транспонирования в 0.

Затем вы используете clearInterval, чтобы остановить непрерывную работу функции.после этой точки. 

    //get the style value with getComputedStyle, which is an accurate representation of 
    //all element styling on load.
    var currentOp = getComputedStyle(op).getPropertyValue("opacity");
    // clear the interval if opacity is less than or equal to 0
    if(currentOp <= 0) clearInterval(timer);

    console.log(currentOp);


<!DOCTYPE>
<html>
<head>
    <style>
    #guitar1
    {
        position: relative;
        top: 0;
        left: 0;
    }

    #guitar2
    {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 1;
    }
    </style>
</head>
<body onload="runTime()">
    <script>

        var timer;

        function reduceOpacity()
        {
            var op = document.getElementById('guitar2');
            
            //get the style value with getComputedStyle, which is an accurate representation of 
            //all element styling on load.
            var currentOp = getComputedStyle(op).getPropertyValue("opacity");
            // clear the interval if opacity is less than or equal to 0
            if(currentOp <= 0) clearInterval(timer);
            
            console.log(currentOp);
            //currentOp = (parseFloat(currentOp) -  0.1).toString();
            currentOp -= 0.1;
            op.style.opacity = currentOp;
        }

        function runTime() 
        {
            timer = setInterval(reduceOpacity, 1000);
        }

    </script>
    <h4 id="header">Gibson Les Paul</h4>
    <div style="position: relative; left: 0; top: 0;">
        <img src="gibson1.png" id="guitar1" width="500" />
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEWzs7P///+xsbG2traurq7y8vLLy8u+vr7Hx8fX19fExMTh4eHAwMDc3Nzn5+f8/Pzq6ur29vbT09Pv7++oqKiXjvXjAAAHrUlEQVR4nO2d6ZaDIAyFFVBbtVrrvP+zDgTcderGkpzJn6kL5H4QILbqRFHEMxbRNJZx+FvHnCYi43Ut//A6jmuSiEyjRVkc00QEwDjOzAd6iCMumogTKoqIMyZ6iAsiaogrPLQQV2koIW6w0EHcJKGC+AcHDcQ/KSggfmHAj/iVADviDv24EXepx4y4UztexN3KsSIe0I0T8ZBqjIgHNeNDPKwYG+IJvbgQT6nFhHhSKx7E00qxIF7QiQPxkkoMiBc1ho94WWHoiDfoCxvxFnUhI96kLVzE25SFinijrjARb1UVIuLNmsJDvF1RaIgW9ISFaEVNSIiWtISDaE1JKIgWdYSBaFVFCIiWNfhHtK7AN6ID/34RnXj3iejItz9EZ559ITr06wfRqVcfiI59ukd07tG1Qw9R49all5Hv0qmn2dudW28rsCvHHrMoN669ZsIunHu+mrHv3vflmnUB3gFtSwgA0K6IIABtyggE0J6QYABtSQkI0I6YoABtyAkM8H5BwQHeLSlAwHtFBQl4p6xAAe8TFizgXdICBrxHXNCAd8gLHPC6wOABr0pEAHhNJArAKzKRAJ4XigbwrFREgOfEogI8IxcZ4HHB6ACPSkYIeEw0SsAjspEC7heOFnCvdMSA+8SjBtwjHzngdwD0gB1CnG0cpvDeTcY/0tJ1Bpaqg7gBpTFlJ47927/tNDaJo0VILWOMCWXjEkMV/dmTYmxSYHKQLaJ4Xt/lIOepspwbBfLzZFbM5I7J+UykRZu0RcoEbOdpZ1xvLOoR0adqk/crEyOXfOz9UUZ9A5R9fdlC3DmD2VxN6KkSwOSn56g6kcgdn/GOZ9zZSxUQ7347Z6KSf4BjVA8ruhNaPaWyx7C4lN2x5qn52auvT7rtDmtxFwmlIqGVjYG4OpD01TPexIM1siMAqicsFoQsq0clcjYjHLybNXOdcCrqNGHMF4RC++vjVi/uTVVUtSnxjRCaKE6qqoUPJdskBP+bhPFpQPDxYPypJc0JNcjL7IGYrXOYaVJ56M2AsO/jJaFQfZ5wVYBDPK8QliIqIfZboQnrPmZKaDgQd74TNSGIL8SMELTUvUuWqg40o56JpBLRF0Io0ZrD0N2yseaEKnQFa/SnNcLopxla+SwhU5UsCNU0Upe6CdRma0LJ8DMjO/mBXtWE9Y+a34UmhC4cqmugAdYIdTjLJgPCn2490oTsp75K+MnTt0abRancKlT1b2hVoUVMTBHWb2Vtpvvw+ZJmgl5V8BrmKdWj+QahmYdhHOr6HnocGnEbee9OQmNsNtMwpTOD2aY/de5oOdP09mQs7wH6FvuwdUL2gQDZnGnOLxcDYT4nVFElxxg3/dGNigOEaTy5rNKxu0Goz90iLK+vFpVejsaEqv5UMDX8GhH1k9KCsK6UvU2UNmCXCKG+Kh8SgiK6kNRA6KnMEbbGhNA9KmtSTku1J54mPN1Js5kGNvSps7jWmxuETxgMo5nGtLGK3teFlGbWMWNCNg45WBnqcX4T9RPE9mqhQNu+BBzmWzNNC8vEcrXI3vGV9f4PQhj6gzGTb3x6nFT975ovhCoMHuYwU66SjdVC5PGwWkzXQ3VOcTEvnREKuGCBBGYwxQ0p2AeWfKZScL4SpdOcBkqkqgQTMOIf3YqvneicRtoj1kNhGaU5NBPf0n+G8K0WtBxa/Cng+sxMqqZbE3ldk30gBdd5aV3AzJCtZW06HUs5z4su2IGwUE44OHkX1bvuD6o4KcYzjcza4m5FvokQ7Dksg/1aZTppsC4Ota1m3tMSMCaBEKxk48wbgn25Wphqt77Lu0A4aTjVsCB4PDhz8f3qaVJCj6YxYbk4uEII7tvTnZg1SZP3W6xJwJo0V/v7tb9IEu2C8Ze+3mieTF/PmRJJU8oZX24IU0/TzVi80CWq0ojMOycZy+Bj+64+3CxXz74+ucwocaXe2ZzvRCHEdMukvZOvVsRwFpMXO3nWf+3AuhLCbPQFhoxbcFli5GZUYvAXzetjg7ih3n/7t39bt25MnTmKwRhv6rputpIOcxTxTxfmx7XtrAr774fkfwMm/zs++XsxyN9PQ/6eKPL3tZG/N5H8/aXk7xEmf583+Xv1yT9vQf6ZGfLPPZF/do3884fknyEl/xww+We5yT+PT/6dCuTfi0H+3Sbk309D/h1D5N8TRf5dX+Tf10b+nXvk35tI/t2XtiV4R7QvwDOiC/deEd0494joyrU3RHeOPSG6dOsF0a1TD4iuXTpHdN+mjj36GBdOffqZ2xx69bU+OfPrL8dw5NlnnujEt99c34F339dr1v37BhxuybWkwD+gZQ0hAFpVEQagxUANBdCaknAALWkJCdBKoIYFaEFPaIC3KwoP8OZADRHwVlVhAt6oK1TA2wI1XMCbtIUMeIu6sAFvCNTQAS8rDB/wokYMgJcCFQfgBZ1YAE8rxQN4MlAxAZ5SiwvwhF5sgIcDFR/gQc0YAQ+pxgl4IFCxAu5Wjhdwp3bMgLsCFTfgDv3YAb8S4Af8EqgUAP+koAH4BwcVwM1ApQO4wUIJcJWGFuBKoFIDXBDRA5wxUQScBCpNwDEXhf99tmqmFzN4/SRFQINYqxdv1tbu9fNsErGGDzyjCSgRM9mDv1k6auXmcfibAAAAAElFTkSuQmCC" id="guitar2" width="500" />
    </div>
    <button type="button" onclick='document.getElementById("header").innerHTML = "yea"'>Click Me!</button>
</body>
</html>

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

...