当前位置： 文江博客话题详情

像喝茶一样用蒸汽制作动画图像

发布于 2024-12-11 08:23:55 字数 237 浏览 0 评论 0原文

我做了这个： jsfiddle.net/BWncv/ 我喝了一杯有蒸汽的茶。我想为这个蒸汽制作动画。但这部动画进展并不顺利。

蒸汽必须向上、向上、向上流动。就像一杯茶顶部的蒸汽。您可以在链接中看到它。

我该如何修复它以使烟雾具有良好的动画效果？

您可以更改 js fiddle 上的代码并更新它。

原文

I have made this: jsfiddle.net/BWncv/
I have a cup of tea with steam. I want to animate this steam. But this animation is not going well.

The steam must be animated up and up and up. Like steam from the top of a cup of tea. You can see it in the link.

How can I fix it so that the smoke is well animated?

You can change the code on js fiddle and update it.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

梦幻的心爱 2024-12-18 08:23:55

试试这个（演示）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">

      #viewport {
        position: relative;

        width: 400px;
        height: 300px;

        margin: 100px auto;
        border: 1px solid #333333;

        overflow: hidden;
      }

      #viewport .smoke {
        position: absolute;
        width: 20px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
      }

      #viewport .smoke1 {
        left: 140px;
        top: 260px;
      }

      #viewport .smoke2 {
        left: 180px;
        top: 260px;
      }

      #viewport .smoke3 {
        left: 220px;
        top: 260px;
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <div class="smoke smoke1"></div>
      <div class="smoke smoke2"></div>
      <div class="smoke smoke3"></div>
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        $('#viewport .smoke').each(function ns () {
          var initialTop = $(this).position().top;

          $(this).animate({
            top: - $(this).height()
          }, Math.random() * 2000 + 2000, function () {
            $(this).css({
              top: initialTop,
              opacity: 0
            });
          }).animate({
            opacity: 1
          }, ns);
        });
      }());
    </script>
  </body>
</html>

这里有一些额外的演示http://jsfiddle.net/nRas9/1/ 完全随机化元素。

我的最终代码有点复杂：

http://jsfiddle.net/Fbtug/32/ (感谢卢克·斯坦利的更新）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">
      #viewport {
        position: relative;
        width: 1000px;
        height: 600px;
        margin: 100px auto;
        border: 1px solid #333333;
        overflow: hidden;
        background: transparent url("http://www.mikevierwind.nl/images/bg-selection.jpg") no-repeat 0px -29px;
      }

      #viewport .smoke {
        position: absolute;
        width: 215px;
        height: 410px;
        bottom: 230px;
        left: 90px;
      }

      .smoke1 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom1.png");
      }

      .smoke2 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom2.png");
      }

      .smoke3 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom3.png");
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <img
        src="http://www.mikevierwind.nl/images/bg-selection-carousel.png"
        width="2610"
        height="600"
        alt=""
        class="carousel-image"
      />
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        var i = 0;
        for (; i < 3; i += 1) {
          setTimeout((function (idx) {
            return function addSmoke () {
              var
                time = 7500,
                smoke = $('<div />', {
                  class: 'smoke smoke' + (idx + 1),
                  css: {
                    opacity: 0
                  }
                });

              // add to viewport
              $(smoke).appendTo('#viewport');

              // animate
              $.when(
                // animate to 100% opacity in some part of the total time (fade in)
                $(smoke).animate({
                  opacity: 1
                }, {
                  duration: time * 0.2,
                  easing: 'linear',
                  queue: false,

                  // animate to 0% opacity in the remaining time (fade out)
                  complete: function () {
                    $(smoke).animate({
                      opacity: 0
                    }, {
                      duration: time * 0.8,
                      easing: 'linear',
                      queue: false
                    });
                  }
                }),

                // animate movement
                $(smoke).animate({
                  bottom: $('#viewport').height()
                }, {
                  duration: time,
                  easing: 'linear',
                  queue: false
                })

              // when all done, remove and add new random smoke
              ).then(function () {
                $(smoke).remove();
                addSmoke();
              });
            };
          }(i % 3)), i * 2500);
        }
      }());
    </script>
  </body>
</html>

Try this (demo):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">

      #viewport {
        position: relative;

        width: 400px;
        height: 300px;

        margin: 100px auto;
        border: 1px solid #333333;

        overflow: hidden;
      }

      #viewport .smoke {
        position: absolute;
        width: 20px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
      }

      #viewport .smoke1 {
        left: 140px;
        top: 260px;
      }

      #viewport .smoke2 {
        left: 180px;
        top: 260px;
      }

      #viewport .smoke3 {
        left: 220px;
        top: 260px;
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <div class="smoke smoke1"></div>
      <div class="smoke smoke2"></div>
      <div class="smoke smoke3"></div>
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        $('#viewport .smoke').each(function ns () {
          var initialTop = $(this).position().top;

          $(this).animate({
            top: - $(this).height()
          }, Math.random() * 2000 + 2000, function () {
            $(this).css({
              top: initialTop,
              opacity: 0
            });
          }).animate({
            opacity: 1
          }, ns);
        });
      }());
    </script>
  </body>
</html>

A little extra demo here http://jsfiddle.net/nRas9/1/ which fully randomizes the elements.

My final code, a little complicated though:

http://jsfiddle.net/Fbtug/32/ (updated thanks to Luke Stanley)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style type="text/css">
      #viewport {
        position: relative;
        width: 1000px;
        height: 600px;
        margin: 100px auto;
        border: 1px solid #333333;
        overflow: hidden;
        background: transparent url("http://www.mikevierwind.nl/images/bg-selection.jpg") no-repeat 0px -29px;
      }

      #viewport .smoke {
        position: absolute;
        width: 215px;
        height: 410px;
        bottom: 230px;
        left: 90px;
      }

      .smoke1 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom1.png");
      }

      .smoke2 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom2.png");
      }

      .smoke3 {
        background: transparent url("http://www.mikevierwind.nl/images/stoom3.png");
      }
    </style>
  </head>

  <body>
    <div id="viewport">
      <img
        src="http://www.mikevierwind.nl/images/bg-selection-carousel.png"
        width="2610"
        height="600"
        alt=""
        class="carousel-image"
      />
    </div>

    <script type="text/javascript">
      (function () {
        "use strict";

        var i = 0;
        for (; i < 3; i += 1) {
          setTimeout((function (idx) {
            return function addSmoke () {
              var
                time = 7500,
                smoke = $('<div />', {
                  class: 'smoke smoke' + (idx + 1),
                  css: {
                    opacity: 0
                  }
                });

              // add to viewport
              $(smoke).appendTo('#viewport');

              // animate
              $.when(
                // animate to 100% opacity in some part of the total time (fade in)
                $(smoke).animate({
                  opacity: 1
                }, {
                  duration: time * 0.2,
                  easing: 'linear',
                  queue: false,

                  // animate to 0% opacity in the remaining time (fade out)
                  complete: function () {
                    $(smoke).animate({
                      opacity: 0
                    }, {
                      duration: time * 0.8,
                      easing: 'linear',
                      queue: false
                    });
                  }
                }),

                // animate movement
                $(smoke).animate({
                  bottom: $('#viewport').height()
                }, {
                  duration: time,
                  easing: 'linear',
                  queue: false
                })

              // when all done, remove and add new random smoke
              ).then(function () {
                $(smoke).remove();
                addSmoke();
              });
            };
          }(i % 3)), i * 2500);
        }
      }());
    </script>
  </body>
</html>
回复 原文
掩饰不了的爱 2024-12-18 08:23:55

一些很棒的答案，这里还有一个使用 animate 改变顶部和不透明度的示例：(演示< /a>)

smoke1.animate({                
top: -500,
opacity: 0.5,
}, 7000, function(){
    smoke1.css({'top':300,'opacity':1})
    smoke1Animate();
});

当然，拉伸顶部，这样不透明度就会在视图中消失。

在不同时间启动动画以使它们逐渐淡入：

smoke1Animate();  
setTimeout(function(){ smoke2Animate(); },2000);
setTimeout(function(){smoke3Animate(); },4000);

然后当然在动画完成时调用自己。

Some awesome answers and here a sample too using animate to alter the top and the opacity: (Demo)

smoke1.animate({                
top: -500,
opacity: 0.5,
}, 7000, function(){
    smoke1.css({'top':300,'opacity':1})
    smoke1Animate();
});

Of course stretching out the top so the opacity fades in view.

Kicking off the animations at different times as to make them fade in gradually:

smoke1Animate();  
setTimeout(function(){ smoke2Animate(); },2000);
setTimeout(function(){smoke3Animate(); },4000);

And then of course calling themselves when they are finished.

回复 原文
神回复 2024-12-18 08:23:55

您需要使烟雾从可视区域升起或在其顶点淡出，将其隐藏，然后重置其起始高度（顶部或顶部边距，取决于您的方法）属性，使其重新显示在底部并淡出再次进入。对所有三张图像都执行此操作，看起来蒸汽在不断上升。或者，制作一个 gif 动画放在前景中。

You need to make the smoke rise off the viewable area or fade out at its apex, hide it, then reset it's starting height (top or top-margin, depending on your method) property to make it show up back at the bottom and fade it in again. Do this to all three images, and it will seem like the steam is perpetually rising. Or, make an animated gif to put in the foreground.

回复 原文
~没有更多了~

关于作者

め七分饶幸

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文