uniapp开发app框架在提升开发效率中的独特优势与应用探索
748
2022-09-06
动画函数封装
文章目录
动画实现原理动画函数简单封装动画函数给不同元素记录不同定时器缓动效果原理动画函数多个目标值之间移动动画函数添加回调函数动画函数封装到单独js文件里面
动画实现原理
核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:
获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left
例如:
动画函数简单封装
注意函数需要传递2个参数,动画对象和移动到的距离。
夏雨荷动画函数给不同元素记录不同定时器
此时有两个问题:
这两个问题都可以通过给不同元素记录不同定时器来解决
代码实现:
缓动效果原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:
让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。核心算法: (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长停止的条件是: 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整(否则会出现不到目标位置就停止的情况)
代码实现:
动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500。
如果是正值,则步长 往大了取整如果是负值,则步长 向小了取
使用三元表达式来实现
代码实现:
动画函数添加回调函数
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。
回调函数写的位置:定时器结束的位置。
例如:
动画函数封装到单独JS文件里面
因为以后经常使用这个动画函数,可以单独封装到一个JS文件里面,使用的时候引用这个JS文件即可。
单独新建一个JS文件。HTML文件引入 JS 文件。
案例:京东伸缩栏
鼠标经过后
原理:
鼠标经过时,紫色盒子往左边移动
鼠标离开时,紫色盒子往右边移动
代码实现:
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~