美文网首页
动画函数

动画函数

作者: 社会主义顶梁鹿 | 来源:发表于2020-06-25 18:37 被阅读0次

一、动画实现原理

核心原理:通过定时器不断移动盒子位置

(1)获取盒子当前位置

(2)让盒子在当前位置加上一个移动距离

(3)利用定时器不断重复这个操作

(4)加一个结束定时器的条件

(5)注意此元素需要添加定位,才能使用element.style.left

二、封装动画函数

function(obj,target){

            clearInterval(timer); //先清除能保证多次点击按钮触发事件重复创建定时器

            var timer = setInterval(function(){

                if(obj.offsetLeft >= target){

                    clearInterval(timer);    //如果到达指定位置就停止定时器

                }

                obj.style.left = obj.offsetLeft + 1 + 'px';

            },30);

        }

三、动画函数给不同元素记录不同定时器

如果很多的元素都要使用同一个封装的动画函数,每次都要声明一个定时器,名字重复且过多占用内存资源。所以给不同的元素使用不同的定时器。

核心原理:利用JS动态语言原理,给当前对象添加属性。

所以给以上封装的函数中的timer改为obj.timer,且不使用var声明

四、缓动动画原理

缓动动画就是让元素运动速度有所变化,比如速度慢慢的停下来

(1)让盒子每次移动的距离慢慢的变小,速度就会慢慢降下来。

(2)核心算法:Math.ceil((目标值-现在的位置)/10),作为每次移动的距离步长。其中Math.ceil是为了避免运算出现小数导致最后的元素位置出现偏差,往上一位取整。

(3)停止的条件;让当前盒子的位置等于目标位置就停止定时器

五、缓动动画多个目标值之间移动

步长为负值时候会使动画后退,但是核心算法需求在负值时候进行修改,Math.floor往下一位取整。

六、动画函数添加回调函数

回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行穿进去的这个函数,这个过程就叫做回调。

函数写到定时器结束的位置。

七、动画函数封装到单独的JS文件里面

(1)单独创建一个JS文件

(2)在JS文件粘贴代码

(3)在目标文件引入该JS文件 <script scr='JS地址'></script>

相关文章

  • vue笔记-12(动画钩子函数)

    动画-钩子函数实现半场动画的介绍 入场函数和出场函数 钩子函数实现小球半场动画 methods: { ...

  • JQuery动画

    简化版动画函数 动画 万能动画函数 animate() 动画中的排队和并发

  • scrollViewDidEndScrollingAnimati

    滚动动画执行完毕调用函数scrollViewDidEndScrollingAnimation,取消动画的话用函数s...

  • RN 动画(Animated)

    1、引入Animated,Easing并初始化一个动画值 2、创建动画函数 更多动画函数:Animated.spr...

  • 动画函数

    Transition TypesiOS easing tween 动画效果缓动函数让界面动画更自然How to c...

  • 动画函数

    一、动画实现原理 核心原理:通过定时器不断移动盒子位置 (1)获取盒子当前位置 (2)让盒子在当前位置加上一个移动...

  • 「DOM 编程」JavaScript 动画

    JavaScript 动画实现方式JavaScript 动画三要素定时器常见动画动画函数 JavaScript 动...

  • 动画钩子函数

    如果想要实现自定义动画,此时就要用到 动画钩子函数 利用钩子函数实现了一个小球的动画:

  • 变形动画

    2. 如何使用变形动画? transform: 变形函数1 变形函数2 ...; 使用的前提是借助于过渡动画,才能...

  • jQuery 动画

    动画函数 .show()/.hide() 函数用于显示/隐藏所有匹配的元素。此外,还可以指定元素显示的过渡动画效果...

网友评论

      本文标题:动画函数

      本文链接:https://www.haomeiwen.com/subject/wxosfktx.html