资讯专栏INFORMATION COLUMN

通过改变属性来实现动画

Sleepy / 516人阅读

摘要:今天这篇文章主要简述如何通过改变属性来实现动画效果,比如通过定时器快速改变等属性,实现图形在的页面上做匀速的运动。

今天这篇文章主要简述js如何通过改变属性来实现动画效果,比如通过定时器快速改变width, height, left, top等属性,实现图形在html的页面上做匀速的运动。

现在就有这样的一个需求,定义2个不同背景颜色的物体,当点击按钮的时候,实现向左,向下匀速
运动。

关键语法:
1,获取当前dom的指定属性值

function computedStyle(dom,attr) {        
        if(getComputedStyle) {
            return getComputedStyle(dom,"")[attr]
        } else {
            return dom.currentStyle()[attr] //兼容IE
        }
  }

这个方法定义的目的是为了获取dom 属性的值,例如:
dom: "

",调用这个方法
computedStyle(dom,"width") 返回 30。

2,定时器,返回这个定时器的唯一id标识

  timerId = setInterval(function(){
  },1000);

这个定时器的主要目的是为了匀速改变dom的属性的值

示例:

   #box{                
        width: 100px; 
        height: 100px; 
        background: red; 
        position:absolute; 
        /*getComputedStyle 方法取属性左边的值"left" 为800*/
        left: 800px;  
        top: 50px;
    }


    #box1{                
        width: 100px; 
        height: 100px; 
        background: blue; 
        position:absolute; 
        left: 900px; 
        top: 50px;
    }

    
    
box
box1
//封装获取id的方法 function $(id) { return document.getElementById(id); } //获取计算后的属性 attr="width" function computedStyle(dom,attr) { if(getComputedStyle) { return getComputedStyle(dom,"")[attr] } else { return dom.currentStyle()[attr] } } window.onload=function(){ var btn=$("button"); var box=$("box"); var box1=$("box1"); btn.onclick=function(){ animate(box,"left",100); animate(box1,"top",400); } function animate(dom,attr,target){ //多个元素一起运动 每个元素绑定一个属性放当前运动的定时器 dom.timer=setInterval(function() { var current=parseInt(computedStyle(dom,attr)); var step=(target>current)?1:-1; /*目标大于当前值 +1 目标小于当前值-1*/ if(target==current) { // 如果等于100的时候退出,也是定时器退出的条件 dom.style[attr]=target+"px"; clearInterval(dom.timer); return false; } //改变位置 dom.style[attr]=(current+step)+"px"; //改变style的属性,实现动画 },10) //每10毫秒改变一次 } }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51676.html

相关文章

  • 04.Android之动画问题

    摘要:动画占用大量内存,如何优化使用动画的注意事项有哪些问题这个问题主要出现在帧动画中,当图片数量较多且图片较大时就极易出现,这个在实际开发中要尤其注意,尽量避免使用帧动画。 目录介绍 4.0.0.1 Android中有哪几种类型的动画,属性动画和补间动画有何区别?补间动画和属性动画常用的有哪些? 4.0.0.2 View动画为何不能真正改变View的位置?而属性动画为何可以?属性动画是如...

    Muninn 评论0 收藏0
  • 通过改变属性实现动画

    摘要:今天这篇文章主要简述如何通过改变属性来实现动画效果,比如通过定时器快速改变等属性,实现图形在的页面上做匀速的运动。 今天这篇文章主要简述js如何通过改变属性来实现动画效果,比如通过定时器快速改变width, height, left, top等属性,实现图形在html的页面上做匀速的运动。 现在就有这样的一个需求,定义2个不同背景颜色的物体,当点击按钮的时候,实现向左,向下匀速运动。 ...

    leanxi 评论0 收藏0
  • 通过改变属性实现动画

    摘要:今天这篇文章主要简述如何通过改变属性来实现动画效果,比如通过定时器快速改变等属性,实现图形在的页面上做匀速的运动。 今天这篇文章主要简述js如何通过改变属性来实现动画效果,比如通过定时器快速改变width, height, left, top等属性,实现图形在html的页面上做匀速的运动。 现在就有这样的一个需求,定义2个不同背景颜色的物体,当点击按钮的时候,实现向左,向下匀速运动。 ...

    wangbinke 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<