js动画效果代码方法

JavaScript013

js动画效果代码方法,第1张

1.toggle():

toggle()方法除了模拟鼠标连续单击事件之外,同时会动态的隐藏改变当前元素的高度,宽度和不透明度,最终切换当前元素的可见状态。如果元素可见,则切换隐藏状态,如元素隐藏,切换可见状态

2.fadeln()与fadeOut()

这两个方法,实现了淡入和淡出的一个动画效果,fadeln()渐显效果,fadeout()渐隐效果,两者结合使用,可把元素隐藏在按钮中,在通过点击事件显示,两方法只改变元素的透明度,不修改其他属性

3.fadeToggle()

此方法会动态的改变当前元素的透明度,最终却换当前元素的可见状态。如果元素是可见的,则通过淡出效果切换隐藏;如果元素是隐藏的,则通过淡入效果切换可见状态,不设置参数时,默认0.4秒内发生淡入与淡出的动画效果

4.fadeTo()

fadeln()与fadeOut()方法都是渐隐渐显,透明度从1到0,从0到1实现一个渐隐渐显效果,而fadeToggle()方法则是可以控制1-0的透明度,为更好展示透明度的效果,可在页面中创造一个下拉框,用于保存透明度值,操作下拉框去控制图片透明度值

5.slideDown()与 slideUp()

slideDown()可改变元素高度,呈现一个滑动效果,由上往下滑动,直到显示最终的当前元素,slideUp()相反,由下往上滑动,直到隐藏最终的当前元素

6.slideToggle()

slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙,同样可改变元素的高度,不同于slideDown()与 slideUp() 的效果, 这个方法是通过点击事情控制元素的隐藏和显示

7.animate()

这个方法是自定义动画效果的方法,高度,宽度,透明度,运行速度都是可通过自定义给属性,这个方法只能改变可以取数字值的css属性,如:大小,边框,内外边距,定位,字体,文本,背景,透明度。

8.stop()

停止动画,stop()方法能结束当前的动画,并立即进入到下一个动画。

使用缓动功能,您可以加快或放慢动画的开头或结尾速度,以获得更加逼真或更加令人愉悦的效果。该技术用于修改 Flash 计算补间中的属性关键帧之间的属性值的方式。如果不使用缓动,Flash 在计算这些值时,会使对值的更改在每一帧中都一样。如果使用缓动,则可以调整对每个值的更改程度,从而实现更自然、更复杂的动画。缓动是应用于补间属性值的数学曲线。补间的最终效果是补间和缓动曲线中属性值范围组合的结果。例如,在制作汽车经过舞台的动画时,如果让汽车从停止开始缓慢加速,然后在舞台的另一端缓慢停止,则动画会显得更逼真。如果不使用缓动,汽车将从停止立刻到全速,然后在舞台的另一端立刻停止。如果使用缓动,则可以对汽车应用一个补间动画,然后使该补间缓慢开始和停止。一个未应用缓动的运动路径。请注意帧沿路径的均匀分布。已应用“停止并启动(中)”缓动的同一运动路径。请注意路径末尾附近帧的浓度,产生更逼真的汽车加速和减速。可以在属性检查器或动画编辑器中应用缓动。在属性检查器中应用的缓动将影响补间中包括的所有属性。在动画编辑器中应用的缓动可以影响补间的单个属性、一组属性或所有属性。缓动可以简单,也可以复杂。Flash 包含一系列的预设缓动,适用于简单或复杂的效果。在动画编辑器中,还可以创建自己的自定义缓动曲线。缓动的常见用法之一是在舞台上编辑运动路径并启用浮动关键帧以使每段路径中的运行速度保持一致。然后可以使用缓动在路径的两端添加更为逼真的加速或减速。在向属性曲线应用缓动曲线时,属性曲线图形区域中将显示缓动曲线的可视叠加。通过将属性曲线和缓动曲线显示在同一图形区域中,叠加使得在测试动画时了解舞台上所显示的最终补间效果更为方便。因为动画编辑器中的缓动曲线可以很复杂,所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性 X、Y 和 Z 外,还可以使用缓动曲线创建其他任何属性的复杂补间。

/*

data:2022-11-17

author:lfp

move运动函数

dom--需要运动的对象

json--{width:100,height:100,left:100,top:100}

callback--回调函数 可调用自己 实现异步动画效果

*/

//主函数

function move(dom,json,callback){

//让每一次动画都是新的开始,防止出现动画一直不停的运行

if(dom.timer)clearInterval(dom.timer)

var i=0

var start=0

//在对象中增加timer 便于控制他停止

dom.timer=setInterval(function(){

i++

//循环每一个目标属性添加动画方法

for(var attr in json){

//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替

var cur=getStyle(dom,attr)

if(i==1)start=cur

//拿到该属性的目标值

var target=json[attr]

//设置分成10次增加增量 你可以根据需要修改

var speed=(target-start)/10

console.log(speed+"====="+cur)

//如果没有达到目标值就一直加

if(Math.abs(cur-target)>1){

dom.style[attr]=cur+speed+"px"

}else{

//达到目标值了就停止或者其他情况也停止

clearInterval(dom.timer)

//等停止了动画再回调函数进行另外的操作

if(callback)callback.call(dom)

}

}

},45)

}

//配套函数

function getStyle(dom,attr){

var value=""

if(window.getComputedStyle){

value=window.getComputedStyle(dom,false)[attr]

}else{

value=dom.currentStyle[attr]

}

value=parseInt(value)

return value || 0//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充

}

function $(id){

//return document.getElementById(id)

return document.querySelector("#"+id)

}