js简单动画:匀速动画、缓动动画、多物体动画以及透明度动画

更新日期: 2019-11-20阅读: 2.2k标签: 动画

主要实现以下几种简单的动画效果(其实原理基本相同):

1.匀速动画:物体的速度固定

2.缓动动画:物体速度逐渐变慢

3.多物体动画

4.透明度动画


1.匀速动画(以物体左右匀速运动为例)

动画效果主要是用定时器setInterval()来实现的,每隔几毫秒让物体移动一点距离,通过不断调用定时器来达到让物体运动的效果。

将定时器放在一个函数内,定义物体的运动速度speed为10,判断物体的运动方向(向左走或向右走)来规定speed的正负;

然后将 物体的offsetLeft加上速度speed 赋值给物体的left样式值(要给物体设置定位);

当物体到达目标位置时清除定时器;

var box = document.querySelector('.box'); // 获取box盒子
  box.addEventListener("mouseover", function() {
      animate(400);  // 当鼠标经过盒子时,让盒子运动到400的位置
  });
  var timer = null;  // 声明一个变量来存储定时器
  function animate(target) {  // target 目标位置
      clearInterval(timer);  // 开启定时器前要先关闭上一个定时器,不然定时器会累加导致速度越来越快
      timer = setInterval(function() {
          var speed = 10;  // 速度 固定值10
          speed = box.offsetLeft < target ? speed : - speed;  // 判断是向左走(负)还是向右走(正)
          if(box.offsetLeft == target) {
              clearInterval(timer);  // 盒子到达目标值时清除定时器
          } else {
              box.style.left = box.offsetLeft + speed + 'px';
          }
      },25)
  }

 

2.缓动动画(和匀速运动相同原理,只不过速度做些改变)

让速度等于 目标值和当前位置之差/10,二者之差会越来越小,即速度speed也会越来越小;

二者之差除以十并不总是整数,可能会导致物体位置和目标值不能完全相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整;

var box = document.querySelector('.box');
    box.addEventListener("mouseover", function() {
        animate(400);
    });
    var timer = null;
    function animate(target) {
        clearInterval(timer);
        timer = setInterval(function() {
            var speed = (target - box.offsetLeft) / 10; // 速度为目标值和当前位置之差/10
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判断speed的正负,大于0向上取整,小于0向下取整
            if(box.offsetLeft == target) {
                clearInterval(timer);
            } else {
                box.style.left = box.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

3.多物体动画(相同原理,不过要多开器几个定时器)

因为有多个物体要做动画,所以要给每个物体都要开启一个定时器,向上边那样只声明一个timer是不行的,

所以要循环遍历每个li(我是用列表写了几个小盒子),给每个li声明一个timer来存储各自的定时器,

并且要给animate函数多添加一个形参obj来区分是哪个盒子的定时器

var lis = document.querySelectorAll('li');
    for(var i = 0; i < lis.length; i++) {   // 循环遍历li
        lis[i].timer = null;   // 给每个li声明一个timer来存储定时器
        lis[i].addEventListener("mouseover", function() {
            animate(this, 400);
        });
    }
    function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var speed = (target - obj.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if(obj.offsetLeft == target) {
                clearInterval(obj.timer);
            } else {
                obj.style.left = obj.offsetLeft + speed + 'px';
            }
        }, 25)
    }

 

4.透明度动画(与匀速运动相似)

声明一个alpha变量来存储当前的透明度,speed为速度,当前透明度加速度 赋值给盒子的透明度样式。

(多个物体透明度也是和上边多物体动画一样的,给每个物体都添加一个定时器,并给animate函数多一个形参obj)

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        opacity: 0.3;
        filter: alpha(opacity = 30); /* 兼容IE8及以下的IE浏览器 */
    }
</style>
<script>
    window.addEventListener('load', function() {
        var box = document.querySelector('.box');
        box.addEventListener('mouseover', function() {
            animateAlpha(100);  // 鼠标经过盒子 透明度变为1
        })
        box.addEventListener('mouseout', function() {
            animateAlpha(30);  // 鼠标离开透明度变为0.3
        })
        var alpha = 30;  // 存储当前透明度 初始值为30
        var timer = null;
        function animateAlpha(target) {
            clearInterval(timer);
            timer = setInterval(function() {
                var speed = 10;
                speed = alpha < target ? speed : - speed; // 判断速度的正负
                if(alpha == target) {
                    clearInterval(timer);
                } else {
                    alpha += speed;
                    /* 这里有两个样式都需要改变 */
                    box.style.filter = 'alpha(opacity = '+ alpha +')';
                    box.style.opacity = alpha / 100; // opacity别忘了除以100
                }
            }, 25);
        }
    })
</script>


链接: https://fly63.com/article/detial/6942

纯CSS3实现各种表情动画

CSS3非常强大,我们可以利用CSS3相关特性绘制很多平面图形,并且可以制作很多简单的动画。今天要分享的是一款用纯CSS3实现的可爱表情动画

Vue.js动画笔记_vue实现动画效果

Vue.js中的元素动画或页面跳转动画有多种实现方式比如:1、自己手动写CSS3动画来实现2、使用第三方CSS动画库如:Animate.css3、在构子函数中操作DOM4、使用第三方Js动画库如:Velocity.js。

新手引导动画的4种实现方式

尽量多的列举出新手引导动画的实现方式, 昨天稍微总结了一下, 实现了4种.源码在最后,如果想直接看结果的,可以拉到最后去看.这里假设所有的弹出层都是基于页面上原有的元素

为何 Canvas 内元素动画总是在颤抖?

在项目中我们可能对动画进行锁帧,帧率可能是 60 或者 30,如果我们想保证渲染不抖动,在匀速直线运动中,我们尽量保证我们设置的速度要是帧率的倍数,或者保证平均每帧移动的像素点是一样的

前端开发常用css动画代码

常用的CSS动画效果,在实际开发中经常需要用到移动、大小、闪烁、渐显、渐隐等动画效果,这篇文章就整理了些常见的动画效果分享给大家,一遍收藏使用。

css环形滚动_内容加载的环形滚动动画效果

创建一个没有背景的圆,然后声明透明度为0.1的黑色边框(看起来是灰色),修改左侧边框颜色。此时会有一个静态的看起来只有左边框有颜色的空心圆。然后声明一个该元素逆时针旋转360度的动画,并让该动画无限播放(infinite)即可

css transition 实现滑入滑出

transition是css最简单的动画。 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!!但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? transition可以做到。

动画函数的绘制及自定义动画函数

制作动画效果离不开动画运动函数,而我们用得最多的无疑就是Tween.js。根据不同的数学公式原理,Tween.js划分出了不同的动画类型,每种动画类型里面都包含以下的缓动类型:ease in 先慢后快、ease out 先块后慢、ease in out 先慢后快再慢

超酷的CSS3 loading预加载动画特效

这是一款超酷CSS3 loading预加载动画特效。该loading特效共有4种不同的效果,分别通过不同的CSS3 keyframes帧动画来完成。HTML结构:4种loading预加载动画的HTML结构分别如下

Vue 动画的封装

js提供的钩子动画before-enter、enter、after-enter,用这种方法写,所有的动画都写在了组件里,外部只需要调用这个fade组件就可以了,也不需要全局去写一些样式了,这种动画的封装是比较推荐的一种动画封装,因为它可以把所有动画的实现完整的封装在一个组件中

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!