通过改变属性来实现动画

leanxi 发布于2019-08-29 14:11 / 2640人阅读

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

今天这篇文章主要简述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毫秒改变一次
                }
            }

混合云 idc机房托管 php改变标签属性实现加载动画 javascript实现动画通过消息队列实现

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

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

04.Android之动画问题

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

Muninn 2019-08-16 14:20 评论0 收藏0
关于Core Animation动画（上）

摘要：关于动画上与对于和，大家应该都很熟悉。需要注意的是，所关联的，是禁用了隐式动画的。而称为展现图层，它实际上是的一份拷贝，表示了任意时刻屏幕显示的的真实值。关于Core Animation动画（上） 1. UIView与CALayer 对于UIView和CALayer，大家应该都很熟悉。通常我们了解到UIView是通过视图树的结构来组织起来的，实际上，UIView管理并维护了另一个图层...

cjie 2019-06-25 14:45 评论0 收藏0
通过改变属性来实现动画

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

Sleepy 2019-08-01 18:21 评论0 收藏0
通过改变属性来实现动画

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

wangbinke 2019-08-21 18:45 评论0 收藏0
Android 动画(续)

摘要：另外，在使用方面，它与官方的属性动画基本一致。属性动画的核心类有个类，以及文件中的标签对应标签的属性有个候选值，分别表示标签内的动画是按照前后顺序播放和同时播放。该文章是一个系列文章，是本人在Android开发的漫漫长途上的一点感想和记录，我会尽量按照先易后难的顺序进行编写该系列。该系列引用了《Android开发艺术探索》以及《深入理解Android 卷Ⅰ，Ⅱ，Ⅲ》中的相关知识，另...

jifei 2019-06-25 12:18 评论0 收藏0