精华内容
下载资源
问答
  • CSS 动画分类

    2019-07-16 10:19:53
    CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与...

    CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。

    首先,CSS动画分类的基本概念:

    1 过渡动画(transition)

    从初始状态过渡到结束状态所产生的动画,它只能定义初始和借宿两个状态,不能定义中间状态,它是一种很简单的最基础的css动画,这个过渡动画只能被动触发,不能主动触发,而且也不能重复发生。被动触发一次,它发生一次,不能重复。

    2 关键帧动画(Animation)

    使用关键帧@keyframes,在关键帧里面的写法如下:

    在每一个阶段我们可以定义不同的元素状态,也就是css,这样就大大增强了css的动画能力。

    总结起来就是:可以定义多个状态,可以实现更复杂的效果,相对于transition它可以主动的触发,也可以重复发生。

        @keyframes 动画名称 {
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            时间点 {
        		元素状态
        	}
            …
        }
    

    其次 浏览器支持

    完全支持该属性的第一个浏览器版本

    在这里插入图片描述

    基本语法

        .main {
            animation: animationname(动画名字) duration(持续时间) timing-function(时间运动曲线) delay(延迟) iteration-count(总共重复的次数) direction(方向,正向播放还是反向播放) fill-mode(定义开始和结束的状态) play-state(是否停止或运行这个动画);
        }
        
        //animationname是和keyframes绑定的,在animationname下面定义动画的状态,一种是from...to从开始到结束,这个是和transition一样的,一种是百分比,从0%到100%,可以定义任意的中间状态。
        @keyframes animationname {
            from { css-code }
            to { css-code }
        
            0% - 100% { css-code }
        }
    

    1 animationname - 关键帧名称

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        
        @keyframes round {
            from { css-code }
            to { css-code }
        
            0% - 100% { css-code }
        }
    

    2 duration - 动画持续时间(单位:s/ms)

        .main {
             width: 100px;
             height: 100px;
             background: red;
             position: relative;
             animation-name: round;
             animation-duration: 500ms;
             animation-iteration-count: infinite;
         }
         @keyframes round {
             0%  {
                   top: 0%;
                   left: 0%;
                   background: red;
             }
             25% {
                   top: 0%;
                   left: calc(100% - 100px);
                   background: blue;
             }
             50% {
                   top: calc(100% - 100px);
                   left: calc(100% - 100px);
                   background: yellow;
             }
             75% {
                   top: calc(100% - 100px);
                   left: 0%;
                   background: green;
             }
             100% {
                   top: 0%;
                   left: 0%;
                   background: red;
             }
         }
    

    3 timing-function - 时间函数曲线

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);   //贝塞尔曲线
        }
    

    timing-function 在animation里面的时间区间是两套css样式之间

    4 delay - 动画开始延迟时间(单位:s/ms)

    仅定义第一次开始延迟时间

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        	animation-delay: 3s;
        }
    

    5 iteration-count - 动画播放次数

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
        }
    

    在transition里面是不能定义播放次数的,但是animation可以,它可以定义两种:一种是具体的播放次数(n),一种是无限循环(infinite)。

    6 direction - 动画播放方向

    动画实际上是相对于时间来讲的,它的播放方向就是正向还是反向播放。它有四个值,分别是:

    normal(正常播放)、reverse(反向播放)、alternate(奇数次正向,偶数次反向)、alternate-reverse(偶数次正向,奇数次反向)。

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
            animation-direction: alternate;
        }
    

    7 fill-mode - 动画不播放时应用到元素的样式

    分为两个状态,一个是还没有开始放,另一个是放完了,也就是说它的循环次数不是无限次的,那么对应的有两个值比较关键:forwards 动画结束后动画将应用该属性值,也就是说动画播放完了,我们继续保留这个属性;backwards 动画开始前应用第一帧的样式,比如说本来有一个样式,然后有一个动画,动画没开始,这时我们就需要把动画的第一帧应用到当前的这个元素上。除此之外呢,还有一个none 两个都不用也就是动画结束后恢复原有样式以及both 两个都用。

        .main {
            animation-name: round;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            animation-delay: 3s;
            animation-direction: alternate;
            animation-fill-mode: forwards;
        }
    

    8 play-state - 控制动画运行或暂停

    有两个值:paused 暂停和 running 运行。play-state一般应用于JS,应用js来控制css是否运行。

    更多学习参考:https://www.9xkd.com/course/4132287707.html

    展开全文
  • Android 所有动画分类

    2019-01-07 00:53:56
    Android所有动画Demo,包括 帧动画,补间动画,属性动画,转场动画,矢量动画...... Demo里面有源码链接
  • 一、背景:  合适的动画不仅更能吸引人们的眼球,也能让你的应用... 按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解。  1)JS动画  通过一个定时器setInte
    一、背景:
         合适的动画不仅更能吸引人们的眼球,也能让你的应用体验更为流畅,而将动画的效果做到极致,才能让用户感到使用你的应用是一种享受,而不是觉得生硬和枯燥。

    二、动画技术分类:

         按技术类型来进行分类,分为三类:JS动画,CSS3动画,html5动画,接下来分别对三类动画进行讲解。

         1)JS动画
         通过一个定时器setInterval间隔来改变元素样式,动画结束时clearInterval即可。(早期类库:jquery、prototype、mootools)
         优缺点:
         优点:可控性很强,兼容性较好
         缺点:
              1、性能不佳:因为需要不断获取和修改dom布局,所以导致了大量页面重排(repaint);
              2、缺乏标准:不同的库使用了不同的API,导致即使是简单的动画也有各不相同的实现方式,调整起来比较耗时;
              3、带宽消耗:相对丰富的动画库代码量都很大,结果就是增加了http请求的大小,降低了页面的载入时间。

         2)css3动画
         css3两种动画实现方式:一种是transition,一种是animation,animation相比transition使用起来更为复杂。
         transition包含4种属性:transition-delay、transition-duration、transition-property、transition-timing-function,对应动画的4种属性:延迟、持续时间、对应CSS属性和缓动函数。
         transform包含7种属性:animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-iteration-count、animation-fill-mode、animation-play-state,对应动画名称、持续时间、缓动函数、动画延迟、动画方向、重复次数、填充模式。
         优点:
         1、css3动画相比JS更轻量,性能更好,更易于实现。
         2、不必担心缺乏标准和增加带宽消耗的问题。
         3、不依赖于主线程,采用硬件加速(GPU)
         4、move.js是一个封装了css3动画效果的轻量级js动画库。
         
         缺点:
         1、不能动态的修改或定义动画内容
         2、不同的动画无法实现同步
         3、多个动画彼此无法堆叠

         示例:2-1 Transitions动画  (过渡动画)
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate {
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background-color: #f00;
                        line-height: 200px;
                        border-radius: 50%;
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                   }
                   .animate-transition {
                        transition: transform 2s linear;
                        -moz-transition: -moz-transform 2s linear;
                        -webkit-transition: -webkit-transform 2s linear;
                        -o-transition: -o-transform 2s linear;
                   }
                   .animate-transition:hover {
                        cursor: pointer;
                        transform: rotate(360deg);
                        -moz-transform: rotate(360deg);
                        -webkit-transform: rotate(360deg);
                        -o-transform: rotate(360deg);
                   }
              </style>
         </head>
         <body>
              <div class="animate animate-transition">Transition Animation</div>
         </body>
    </html>

         示例2-2:keyframes animation(关键帧动画)
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate {
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background-color: #f00;
                        line-height: 200px;
                        border-radius: 50%;
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                   }
                   .animate-keyframes {
                        -webkit-animation: none;
                   }
                   .animate-keyframes:hover {
                        cursor: pointer;
                        -webkit-animation: frames 2s linear infinite;
                   }
                   @-webkit-keyframes frames {
                        0% {
                             background-color: #f00;
                             -webkit-transform: rotate(0deg);
                        }
                        100% {
                             background-color: #f00;
                             -webkit-transform: rotate(360deg);
                        }
                   }
              </style>
         </head>
         <body>
              <div class="animate animate-keyframes">Transition Animation</div>
         </body>
    </html>
        
         3)html5动画
         html5定义了三种绘图的方式,canvas,svg,webGL,其中svg作为一种可缩放矢量图形的实现是基于xml标签定义的,它有专门的animate标签来定义动画。而为canvas或者webGL实现动画则需要通过requestAnimationFrame(简称raf)来定期刷新画布。尽管raf的方式会让代码变得复杂,但是因为不需要那么多的文档对象(通常浏览器只需要管理一个画布),它的性能也好很多,尤其是在内存吃紧的移动端上面。

         3-1 svg动画:
         示例:3-1
         <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate-svg {
                        width: 200px;
                        margin: 0 auto;
                   }
              </style>
         </head>
         <body>
              <div class="animate-svg">
                   <svg id="svgAnimation" ns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
                        <g transform="translate(100, 100)">
                             <g>
                                  <rect width="200" height="200" rx="100" ry="100" fill="red" transform="translate(-100, -100)"></rect>
                                  <text x="-60" y="-0" font-size="20" fill="white">SVG Animation</text>
                                  <animateTransform attributeName="transform" attributeType="xml" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite">SVG Animation</animateTransform>
                             </g>
                        </g>
                   </svg>
              </div>
         </body>
    </html>
         svn动画优缺点:
         优点:
         1) 矢量图形,不受像素影响,这个特性在不同的平台或者媒体下表现良好;
         2) SVG对动画支持较好,其DOM结构可以被其特定语法或者js控制
         3) SVG的结构是XML,其可访问性、可操作性、可编程性、可被CSS样式化完胜Canvas。另外,其支持ARIA属性
         缺点:
         1) DOM比正常的图形慢,而且如果其节点多而杂,就更慢。
         2) 不能动态修改动画内容
         3)不能与HTML内容集成,整个SVG作为一个动画

         3-2:requestAnimationFrame(简称raf)接口改进手段+结合js来实现高性能的动画。主要手段如下:
         优点:
         1、在每次浏览器更新页面时,能获取通知并执行应用,简单理解为RAF能在每个16.7ms间执行一次咱们的函数。
         2、最小化的消耗资源,RAF在页面被切换或浏览器最小化时,会暂停执行,等页面再次关注时,继续执行动画。
         3、在移动设备上使用3d硬件加速,最简单办法就是添加-webkit-transform: translateZ(0),原因是移动端的显卡有很强的图形渲染能力,而每个应用的webview内存却是极其有限的。
         4、js配合h5可控性好,这方面做的最全面的有Velocity.js,不过tween.js也很棒(从flash算法移植过来的,专注与动画的数值计算)。
         缺点:
         1、无法控制执行时间,执行时间由系统根据屏幕刷新时间决定
         2、浏览器兼容问题,低版本浏览器降级处理,使用setInterval或setTimeout

        示例3-2:requestAnimationFrame制作旋转特效
         <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate {
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background-color: #f00;
                        line-height: 200px;
                        border-radius: 50%;
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                   }
                   .animate-input {
                        margin-top: 10px;
                        text-align: center;
                   }
              </style>
         </head>
         <body>
              <div id="animate-RAF" class="animate animate-RAF">RAF Animation</div>
              <div class="animate-input"><input type="button" id="btn_start" value="Start" style="width:100px;height:30px;" /></div>
              <script type="text/javascript">
                   var animate_raf = document.getElementById("animate-RAF"),
                        btn_start = document.getElementById("btn_start"),
                        frameid = null;
                   function frame(time) {
                        animate_raf.style['-webkit-transform'] = 'rotate(' + Math.cos(time/1000) * 360 + 'deg)';
                        frameid = requestAnimationFrame(frame);
                   }
                   // 绑定事件
                   btn_start.addEventListener("click", function(event) {
                        var val = this.value;
                        if (val == "Start") {
                             frameid = requestAnimationFrame(frame);
                             this.value = "Pause";
                        } else {
                             this.value = "Start";
                             cancelAnimationFrame(frameid);
                        }
                   }, false);
              </script>
         </body>
    </html>

    3-3:Canvas动画
    优点:
    1)画2D图形中,页面渲染性能比较高,页面渲染性能受图形复杂度影响小,渲染性能只受图像的分辨率的影响
    2)画出来的图形可以直接保存为.png或者.jpg的图形
    3)最适合于画光栅图像(如游戏和不规则集合图形等)
    缺点:
    1)整个一张图,没有dom节点可供操作;
    2)没有实现动画的API,你必须依靠定时器和其他事件来更新Canvas
    3)对文本的渲染支持是比较差
    4)对要求有高可访问性(盲文、声音朗读等)页面,比较困难

    3-4:WebGL
    WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES2.0结合在一起,通过增加OpenGL ES2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型, 还能创建复杂的导航和数据视觉化。

    3-5 问题思考:

    1、不必要维护来支持多种方式实现同样的事情;
    2、Web开发人员需要学习多种实现技术;
    3、js不容易设置声明式动画。
    4、flash动画(已慢慢过时)
          

    三、动画基本属性
    相关概念:绘制频率、屏幕刷新频率、硬件加速、60fps

    绘制频率:页面每一帧变化都是系统绘制出来的(GPU或者CPU)。
    它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,简称fps),对应于显示器的60Hz。

    刷新频率:图像在屏幕上更新的速度,也就是屏幕上的图像每秒出现的次数,单位是Hz,刷新频率越高,屏幕上图片闪烁感就越小,稳定性也就越高。人的眼睛不容易察觉75Hz以上刷新频率带来的闪烁感。

    硬件加速:
    硬件有三个处理器:CPU、GPU和APU(声音处理器)。他们通过PCI/AGP/PCIE总线交换数据。
    GPU在浮点运算、并行计算等部分计算方面,明显高于CPU的性能。

    60Hz和60fps关系:
    fps代表GPU渲染画面的频率,Hz代表显示器刷新屏幕的频率。游戏里谈到掉帧,是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps,但因为视觉暂留原理,我们看到的画面仍然是运动和连贯的。


    四、web Animations 1.0 通用动画模型
         web Animations API为css和svg动画提供了单一接口。旨在通过提供更好的性能、更好的控制时间线和播放、灵活、统一的JavaScript编程接口。

    示例:4-1:点击旋转效果

    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate {
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background-color: #f00;
                        line-height: 200px;
                        border-radius: 50%;
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                        cursor: pointer;
                   }
                   .web-animation-1 {
                        -webkit-transform: rotate(360deg);
                   }
              </style>
         </head>
         <body>
              <div id="web_animation_1" class="animate web-animation-1">Web Animation-1</div>
              <script src="web-animations.js"></script>
              <script type="text/javascript">
                   var web_animation_1 = document.getElementById("web_animation_1");
                   web_animation_1.addEventListener('click', function() {
                        web_animation_1.animate([{
                             transform: 'rotate(0deg)'
                        }, {
                             transform: 'rotate(360deg)'
                        }],{
                             duration: 2
                        });
                   }, false);
              </script>
         </body>
    </html>

    示例:4-2:更复杂时序(正负旋转)
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .animate {
                        width: 200px;
                        height: 200px;
                        margin: 0 auto;
                        border-radius: 50%;
                        background-color: #f00;
                        line-height: 200px;
                        border-radius: 50%;
                        text-align: center;
                        color: #fff;
                        font-size: 20px;
                        cursor: pointer;
                   }
                   .web-animation-2 {
                        -webkit-transform: rotate(360deg);
                   }
              </style>
         </head>
         <body>
              <div id="web_animation_2" class="animate web-animation-2">Web Animation-2</div>
              <script src="web-animations.js"></script>
              <script type="text/javascript">
                   var web_animation_2 = document.getElementById("web_animation_2");
                   web_animation_2.addEventListener('click', function() {
                        web_animation_2.animate([{
                             transform: 'rotate(0deg)'
                        }, {
                             transform: 'rotate(360deg)'
                        }],{
                             // 旋转方向
                             direction: "alternate",
                             // 旋转值
                             duration: 1,
                             // 迭代
                             iterations: Infinity,
                             // 缓解过渡
                             easing: 'ease-in-out',
                             // 播放速率
                             playbackRate: 2
                        });
                   }, false);
              </script>
         </body>
    </html>

    示例:4-3 并行动画
    <!DOCTYPE html>
    <html>
         <head>
              <meta charset="utf-8" />
              <style type="text/css">
                   .web_animation_4 {
                        width: 700px;
                        margin: 0 auto;
                        padding: 10px;
                        background-color: #ccc;
                        cursor: pointer;
                   }
                   .web_animation_4 .par-timing-box {
                        background-color: #00f;
                        height: 20px;
                        margin: 10px;
                   }
              </style>
         </head>
         <body>
              <div id="web_animation_4" class="web_animation_4">
                   <div id="parItem1" class="par-timing-box" style="width: 500px;"></div>
                   <div id="parItem2" class="par-timing-box" style="width: 700px;"></div>
                   <div id="parItem3" class="par-timing-box" style="width: 200px;"></div>
              </div>
              <script src="web-animations.js"></script>
              <script type="text/javascript">
                   var web_animation_4 = document.getElementById("web_animation_4"),
                        parItem1 = document.getElementById("parItem1"),
                        parItem2 = document.getElementById("parItem2"),
                        parItem3 = document.getElementById("parItem3");
                   web_animation_4.addEventListener('click', function() {
                        var obj = new ParGroup([
                             new Animation(parItem1, [{width: '0px'}, {width: '500px'}], 1),
                             new Animation(parItem2, [{width: '0px'}, {width: '700px'}], 1),
                             new Animation(parItem3, [{width: '0px'}, {width: '200px'}], 1)
                        ]);
                        document.timeline.play(obj);
                   }, false);
              </script>
         </body>
    </html>

    还有很多的例子..大家可以多尝试


    五、现行动画实现方案:

    1)页面增强动画建议使用CSS动画
    2)复杂动画交互建议使用RAF及setInterval或setTimeout优雅降级处理
    3)业界主流动画库:
         Velocity.js是一款动画切换的jQuery插件,包含(颜色切换、转换(transform)、循环缓动、CSS切换、Scroll功能),支持Android和ios,内部使用jQuery的$.queue方法,如果能将Velocity.js依赖jQuery插件变为js原生来实现,在移动端的作用将更加明显。
    4)Swipe JS 一款移动端触摸滑块幻灯片插件,不但能够使用于各种操作系统的手机,还能够利用H5的硬件加速功能来完成滑块的切换效果,其效果以及实用性非常强。

    六、css动画比JS流畅度对比:
         根据Google Developer Chromium项目,渲染线程分为main thread和compositor thread。
         如果CSS动画只是改变transforms和opacity,这时整个CSS动画得以在compositor thread完成(而js动画则会在main thread执行,然后触发compositor进行下一步操作)
         在JS执行一些昂贵的任务时,main thread繁忙,CSS动画由于使用了compositor thread可以保持流畅。
         在主线程中,维护了一棵Layer树(LayerTreeHost),管理了TiledLayer,在compositor thread,维护了同样一颗LayerTreeHostImpl,管理了LayerImpl,这两棵树的内容是拷贝关系。因此可以彼此不干扰,当JavaScript在main thread操作LayerTreeHost的同时,compositor thread可以用LayerTreeHostImpl做渲染。当JavaScript繁忙导致主线程卡住时,合成到屏幕的过程也是流畅的。为了实现防假死,鼠标键盘消息会被首先分发到compositor thread,然后再到main thread。这样,当main thread繁忙时,compositor thread还是能够响应一部分消息,例如,鼠标滚动时,加入main thread繁忙,compositor thread也会处理滚动消息,滚动已经被提交的页面部分。

         CSS动画比JS流畅的前提:
         1)在Chromium基础上的浏览器中
         2)JS在执行一些昂贵的任务
         3)同时CSS动画不触发layout或paint
              在CSS动画或JS动画触发了paint或layout时,需要main thread进行Layer树的重计算,这时CSS动画或JS动画都会阻塞后续操作。
         根据CSS Triggers,只有如下属性的修改才符合“仅触发Composite,不触发layout或paint”:
         backface-visibility: 指定当元素背面朝向观察者时是否可见。
         opacity: 透明度
         perspective: 定于3D元素距视图的距离
         perspective-origin: 定义3D元素所基于的X轴和Y轴
         transform: 设置元素变形、旋转、缩放、倾斜。

         所以只有用上了3D加速活修改opacity时,才有机会用得上CSS动画的这一优势。
         因此,在大部分应用场景下,效率角度更值得关注还是下列问题。
         是否导致layout
         repaint的面积
         是否有高消耗的属性(css shadow等)
         是否启用硬件加速。

         css动画和JS动画主要的不同点是
         功能涵盖面,JS比CSS3大
         定义动画过程的@keyframes不支持递归定义,如果有多种类似的动画过程,需要调节多个参数来生成的话,将会有很大的冗余
         时间尺度上,@keyframes动画粒度粗,而JS的动画粒度控制可以很细
         CSS3动画里被支持的时间函数非常少,不够灵活
         以现有的接口,CSS3动画无法做到支持两个以上的状态转化
         实现重构难度不一,CSS3比JS更简单,性能调优方向固定
         对于帧速表现不好的低版本浏览器,CSS3可以做到自然降级,而JS则需要撰写额外代码
         css3有兼容性问题,而JS大多时候没有兼容性问题。
         

    七、常见动画效果分类

         公司内部常见活动页动画库:

         1、modPageSlide组件:H5活动页整屏滑动切换功能,提供多种切换方式;
         2、H5FullscreenPage组件:全屏滚动效果组件
         3、iSlider:高性能H5滑屏组件
         4、css3的滑屏组件
         5、WebApp手机活动页模板
         6、ELego.js:CSS3动画流水式编程框架
         7、smartclick:移动设备HTML5点击高亮组件
        
         业界常使用的一些动画库:
         1、css3动画:move.js
         2、动画切换的jQuery插件:velocity.js
         3、移动web内容滑块类库:swipe.js
         4、提供CSS、SVG动画的单一接口:Web Animations API
         5、基于H5高性能js动画库:Collie

    八、号称DOM动画的四大神器
         
         位移:transform: translate( npx,  npx);
         缩放:transform: scale( n);
         旋转:transform: rotate( ndeg);
         透明:opacity:  0 ~ 1;



    展开全文
  • Android动画分类

    千次阅读 2017-12-15 16:30:53
    Android的动画本来有俩种:1、补间动画tween Animation;2、帧动画FrameAnimation 但是Android3.0之后又加入了属性动画 Property Animation 1、补间动画tween Animation :包括移动、渐变、伸缩、旋转,一般是...

    Android的动画本来有俩种:1、补间动画tween Animation;2、帧动画FrameAnimation

    但是Android3.0之后又加入了属性动画 Property Animation

    1、补间动画tween Animation :包括移动、渐变、伸缩、旋转,一般是定义在res-anim这个资源文件夹下,然后res-style中定义这个动画,

    <style name="Anim_Pop_TopOrBotom">
            <item name="android:windowEnterAnimation">@anim/pop_in_bottom_to_top</item>
            <item name="android:windowExitAnimation">@anim/pop_out_top_to_bottom</item>
        </style>

    ,在代码中使用

    window.setAnimationStyle(R.style.Anim_Pop_TopOrBotom);
    
     TranslateAnimation translateAnimation = new TranslateAnimation(0,
                    100,0,300);
    
            RotateAnimation rotateAnimation = new RotateAnimation(0,360f);
    
            ScaleAnimation scaleAnimation = new ScaleAnimation(1,2,1,2);
    
            AnimationSet set = new AnimationSet(true);  //组合动画
            set.addAnimation(translateAnimation); //设置动画
            set.addAnimation(rotateAnimation); //设置动画
            set.addAnimation(scaleAnimation); //设置动画
            set.setFillAfter(true);
            set.setDuration(3000);  //设置动画时间
            v.startAnimation(set); //启动
    

    2、帧动画FrameAnimation    这两种只适用于View上,

    3、属性动画 Property Animation:

          Android3.0之后增加了属性动画:属性动画可以定义在res-animator的资源文件中,它是用来在特定的时间修改对象的属性,例如背景颜色和alpha等等,常用的Java类有:ValueAnimator 、ObjectAnimator和AnimatorSet

    <set  
      android:ordering=["together" | "sequentially"]]]>  
      
        <objectAnimator  
            android:propertyName="string"  
            android:duration="int"  
            android:valueFrom="float | int | color"  
            android:valueTo="float | int | color"  
            android:startOffset="int"  
            android:repeatCount="int"  
            android:repeatMode=["repeat" | "reverse"]  
            android:valueType=["intType" | "floatType"]/>  
      
        <animator  
            android:duration="int"  
            android:valueFrom="float | int | color"  
            android:valueTo="float | int | color"  
            android:startOffset="int"  
            android:repeatCount="int"  
            android:repeatMode=["repeat" | "reverse"]  
            android:valueType=["intType" | "floatType"]/>  
      
        <set]]>  
            ...  
        </set>  
    </set>  

    文件需要有根元素,可以使用<set>, <objectAnimator>, or <valueAnimator>. <set>可以作为一个集合,而且集合中还可以存在<set>元素。

    AnimatorSetset=(AnimatorSet)AnimatorInflater.loadAnimator(myContext,  
        R.anim.property_animator);  
    set.setTarget(myObject);  
    set.start(); 

    属性动画的具体实现原理

    从上述工作原理可以看出属性动画有两个非常重要的类:ValueAnimator 类 & ObjectAnimator 类,其实属性动画的使用基本都是依靠这两个类

    首先介绍ValueAnimator 类:

    • 定义:属性动画机制中 最核心的一个类
    • 实现动画的原理:通过不断控制 值 的变化,再不断 手动 赋给对象的属性,从而实现动画效果

    ValueAnimator类中有3个重要方法:

    1. ValueAnimator.ofInt(int values)
    2. ValueAnimator.ofFloat(float values)
    3. ValueAnimator.ofObject(int values)

    下面直接看代码:

    private void test() {
            // 步骤1:设置动画属性的初始值 & 结束值
            ValueAnimator anim = ValueAnimator.ofInt(20, 600);
            // ofInt()作用有两个
            // 1. 创建动画实例
            // 2. 将传入的多个Int参数进行平滑过渡:此处传入0和1,表示将值从0平滑过渡到1
            // 如果传入了3个Int参数 a,b,c ,则是先从a平滑过渡到b,再从b平滑过渡到C,以此类推
            // ValueAnimator.ofInt()内置了整型估值器,直接采用默认的.不需要设置,即默认设置了如何从初始值 过渡到 结束值
            // 关于自定义插值器我将在下节进行讲解
            // 下面看看ofInt()的源码分析 ->>关注1
            // 步骤2:设置动画的播放各种属性
            anim.setDuration(500);
            // 设置动画运行的时长
            anim.setStartDelay(500);
            // 设置动画延迟播放时间
            anim.setRepeatCount(0);
            // 设置动画重复播放次数 = 重放次数+1
            // 动画播放次数 = infinite时,动画无限重复 anim.setRepeatMode(ValueAnimator.RESTART);
            // 设置重复播放动画模式
            // ValueAnimator.RESTART(默认):正序重放
            // ValueAnimator.REVERSE:倒序回放
            // 步骤3:将改变的值手动赋值给对象的属性值:通过动画的更新监听器
            // 设置 值的更新监听器
            // 即:值每次改变、变化一次,该方法就会被调用一次
            anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    int currentValue = (Integer) animation.getAnimatedValue();
                    // 获得改变后的值
                    System.out.println(currentValue);
                    // 输出改变后的值
                    // 步骤4:将改变后的值赋给对象的属性值,下面会详细说明
                    btn_click.getLayoutParams().width = currentValue;
                    // 步骤5:刷新视图,即重新绘制,从而实现动画效果
                    btn_click.requestLayout();
                }
            });
            anim.start();// 启动动画
        }
    
        // 关注1:ofInt()源码分析
        public static ValueAnimator ofInt(int... values) {
            // 允许传入一个或多个Int参数
            // 1. 输入一个的情况(如a):从0过渡到a;
            // 2. 输入多个的情况(如a,b,c):先从a平滑过渡到b,再从b平滑过渡到C
            ValueAnimator anim = new ValueAnimator(); // 创建动画对象
            anim.setIntValues(values); // 将传入的值赋值给动画对象
            return anim;
        }

    展示效果图:

     

     

    展开全文
  • android动画-动画分类及代码示例

    千次阅读 2014-06-04 17:52:06
    原来一直对动画一知半解,只知道按照网上的方法会用就行了,但是自己写起来感觉确实...动画分类  1.Peoperty Animation  这个动画是Android3.0之后推出的目前用处不大。  2.View Animation  这类动画也叫twe

    原来一直对动画一知半解,只知道按照网上的方法会用就行了,但是自己写起来感觉确实有点费劲,今天终于研究了代码实现,一下子感觉清晰多了。先把总结如下,代码中有详细的注释。

    动画分类

       1.Peoperty Animation

          这个动画是Android3.0之后推出的目前用处不大。

       2.View Animation

           这类动画也叫tween animation 主要分为 渐变动画(AlphaAnimation)旋转动画(RotateAnimation)

    缩放动画(ScaleAnimation)位移动画(TranslateAnimation)

     3.Drawable Animation

          这类动画也叫帧动画 FrameAnimation


    先上tween animation

    MainActivity.java

    package com.example.testanimation;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.view.animation.AlphaAnimation;
    import android.view.animation.Animation;
    import android.view.animation.AnimationSet;
    import android.view.animation.RotateAnimation;
    import android.view.animation.ScaleAnimation;
    import android.view.animation.TranslateAnimation;
    import android.widget.Button;
    import android.widget.ImageView;
    
    public class MainActivity extends Activity {
    
    	private ImageView imgView;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		
    		imgView = (ImageView)this.findViewById(R.id.imgView) ;
    		Button btnAlpha = (Button)this.findViewById(R.id.btnAlpha) ;
    		btnAlpha.setOnClickListener(new AnimationOnClickListener(AnimationType.alpha));
    		Button btnRotate = (Button)this.findViewById(R.id.btnRotate) ;
    		btnRotate.setOnClickListener(new AnimationOnClickListener(AnimationType.rotate));
    		Button btnTraslate = (Button)this.findViewById(R.id.btnTraslate) ;
    		btnTraslate.setOnClickListener(new AnimationOnClickListener(AnimationType.traslate));
    		Button btnScale = (Button)this.findViewById(R.id.btnScale) ;
    		btnScale.setOnClickListener(new AnimationOnClickListener(AnimationType.scale));
    		Button btnComplex = (Button)this.findViewById(R.id.btnComplex) ;
    		btnComplex.setOnClickListener(new AnimationOnClickListener(AnimationType.complex));
    		
    		
    	}
    	
    	enum AnimationType {
    		alpha,
    		rotate,
    		traslate,
    		scale,
    		complex
    	}
    	
    	class AnimationOnClickListener implements OnClickListener {
    		
    		private AnimationType mAnimationType;
    		
    		public AnimationOnClickListener (AnimationType animationType) {
    			this.mAnimationType = animationType;
    		}
    		
    		@Override
    		public void onClick(View v) {
    			switch (mAnimationType) {
    			case alpha:
    				/**
    				 * 透明度从不透明变为0.2透明度
    				 */
    				AlphaAnimation _alphaAnimation = new AlphaAnimation(1.0f, 0.2f);
    				_alphaAnimation.setDuration(200);
    				_alphaAnimation.setFillAfter(true);//动画执行完的状态显示
    				imgView.startAnimation(_alphaAnimation);
    				break;
    			case rotate:
    				/**
    				 * RotateAnimation 以图片中点为圆心旋转360度
    				 * params:
    				 * pivotXType 中心点x坐标类型 RELATIVE_TO_SELF相对于自己,RELATIVE_TO_PARENT相对于父view
    				 * pivotYType 同上
    				 * 
    				 * pivotXValue,pivotYValue(圆心)
    				 * 
    				 */
    				RotateAnimation _rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    				_rotateAnimation.setDuration(3000);
    //				_rotateAnimation.setRepeatMode(Animation.REVERSE);
    				imgView.startAnimation(_rotateAnimation);
    				break;
    			case traslate:
    				/**
    				 * 按照图片的宽高2倍的位移移动
    				 */
    				TranslateAnimation _translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f);
    				_translateAnimation.setDuration(3000);
    				_translateAnimation.setFillAfter(true);
    				imgView.startAnimation(_translateAnimation);
    				break;
    			case scale:
    				/**
    				 * ScaleAnimation 以图片左上角为静止点,按照1.5倍尺寸放大
    				 * params:
    				 * pivotXType 中心点x坐标类型 RELATIVE_TO_SELF相对于自己,RELATIVE_TO_PARENT相对于父view
    				 * pivotYType 同上
    				 * pivotXValue,pivotYValue(静止点)
    				 */
    				ScaleAnimation _scaleAnimation = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f, Animation.RELATIVE_TO_PARENT, 0f, Animation.RELATIVE_TO_SELF, 0f);
    				_scaleAnimation.setDuration(300);
    				_scaleAnimation.setZAdjustment(Animation.ZORDER_TOP);
    				_scaleAnimation.setRepeatCount(1);
    				_scaleAnimation.setRepeatMode(Animation.REVERSE);//必须设置setRepeatCount此设置才生效,动画执行完成之后按照逆方式动画返回
    				imgView.startAnimation(_scaleAnimation);
    				break;
    			case complex:
    				AnimationSet _animationSet = new AnimationSet(false);
    				AlphaAnimation _alphaAnimation2 = new AlphaAnimation(1.0f, 0.2f);
    				_alphaAnimation2.setDuration(1000);
    				_alphaAnimation2.setRepeatCount(1);
    				_alphaAnimation2.setRepeatMode(Animation.REVERSE);
    //				_alphaAnimation2.setFillAfter(true);//设此地方不好使,必须设置到AnimationSet中
    				
    				
    				TranslateAnimation _translateAnimation2 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 2f);
    				_translateAnimation2.setDuration(1000);
    				_translateAnimation2.setRepeatCount(1);
    				_translateAnimation2.setRepeatMode(Animation.REVERSE);
    //				_translateAnimation2.setFillAfter(true);
    				
    				_animationSet.addAnimation(_alphaAnimation2);
    				_animationSet.addAnimation(_translateAnimation2);
    				_animationSet.setFillAfter(true);
    //				_animationSet.setRepeatCount(1);
    //				_animationSet.setRepeatMode(Animation.REVERSE);//这两个属性设此地不好使,必须单个设置
    				
    				imgView.startAnimation(_animationSet);
    				break;
    
    			default:
    				break;
    			}
    			
    		}
    	}
    
    	@Override
    	public boolean onCreateOptionsMenu(Menu menu) {
    		// Inflate the menu; this adds items to the action bar if it is present.
    		getMenuInflater().inflate(R.menu.main, menu);
    		return true;
    	}
    
    }
    
    activity_main.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >
    
        <ImageView
            android:id="@+id/imgView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />
    
        <Button
            android:id="@+id/btnAlpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="alpha" />
    
        <Button
            android:id="@+id/btnRotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="rotate" />
    
        <Button
            android:id="@+id/btnTraslate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="traslate" />
    
        <Button
            android:id="@+id/btnScale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="scale" />
    
        <Button
            android:id="@+id/btnComplex"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="animationSet" />
    
    </LinearLayout>

    下面为frame animation

    public class FrameAnimationAcitvity extends Activity {
    	private ImageView imageView;
    	private AnimationDrawable ad;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        	super.onCreate(savedInstanceState);
        	setContentView(R.layout.animation_list);
        	Button button=(Button)findViewById(R.id.button1);
        	imageView=(ImageView)findViewById(R.id.imageView1);
        	imageView.setBackgroundResource(R.drawable.framedrawable);
        	ad=(AnimationDrawable)imageView.getBackground();
        	button.setOnClickListener(new View.OnClickListener() {
    			@Override
    			public void onClick(View v) {
                      	ad.start();			
    			}
    		});
        }
    }
    framedrawable.xml

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
        <item android:drawable="@drawable/grid_liushui" android:duration="200"/>
        <item android:drawable="@drawable/grid_payout" android:duration="200"/>
        <item android:drawable="@drawable/grid_report" android:duration="200"/>
    </animation-list></span>


    附上tween动画的源码下载链接

    http://download.csdn.net/detail/duanyu218/7449471


    展开全文
  • Android的动画基本分类

    千次阅读 2018-05-02 13:23:53
    1、Android动画可以分为帧动画(Frame Animation)、补间动画(Tweened Animation)和属性动画。比较:a、属性动画是真正的实现了view的移动,补间动画对view的移动更像是在不同地方绘制了一个影子,实际的对象还是...
  • Android动画分类(一)

    千次阅读 2017-03-04 15:47:22
    1、官方分类,三种:属性动画(Android 3.0之后才添加)、视图动画(分为逐帧动画和补间动画)、Drawable 动画 2、属性动画 /
  • 为什么使用动画,自从Android5.0以后,Google宣布了Material Design的设计语言,也增加了很多动画效果,使得app看起来更自然美观,交互体验更好。在我们的app里如果适当的使用动画的话,会给app带来更棒的交互体验,...
  • Android所有动画分类总结

    千次阅读 2019-01-07 16:55:10
    Android常用动画调研 视图动画(View Animation) 视图动画:也叫Tween(补间)动画可以在一个视图容器内执行一系列简单变换(位置、大小、旋转、透明度)。譬如,如果你有一个TextView对象,您可以移动、旋转、...
  • Android动画分类与区别

    千次阅读 2015-03-25 14:16:55
    Android包含三种动画:View Animation、 Drawable Animation、Property Animation(Android3.0新引入)。
  • Android动画分类和区别

    千次阅读 2014-09-16 15:56:28
    Android包含三种动画:View Animation、 Drawable Animation、Property Animation(Android3.0新引入)。
  • 初始Android动画

    千次阅读 2016-12-04 19:20:19
    初始Android动画  在Android开发过程中,为了提高美感、用户体验,动画是必不可少的一部分。  本篇主要说一下动画分类: ...它包括四种类型,渐变动画AlphaAnimation、旋转动画RotateAnimation、缩放动画ScaleAni
  • Android 动画总结csdn图片可能有问题,可以看原文地址:http://www.jianshu.com/p/d98e79486373动画分类Android中动画大概分为3类: TweenAnimation(补间动画)TranslateAnimation ScaleAnimation RotateAnimation ...
  • Android动画分类: 视图动画 ( View Animation ): 逐帧动画(Frame by Frame Animation); 补间动画(TweenedAnimations Animation) Android-Animotion动画详解-逐帧动画,补间动画,属性动画
  • Android之帧动画与补间动画的使用

    千次阅读 2015-08-14 15:23:34
    Android提供了3种类型动画:   补间动画:补间动画可以应用于View,让你可以定义一系列关于位置、大小、旋转和透明度的改变,从而让   View的内容动起来。   逐帧动画:传统的基于单元格的动画,每一帧...
  • Android动画分类主要分三类: Tweened Animation补间动画 Frame Animation帧动画 Property Animation属性动画 现在我们来介绍一下补间动画。Tweened Animation补间动画,是通过配置动画文件(xml文件/Java代码)对...
  • Android视图动画之补间动画知识梳理

    千次阅读 2018-12-20 12:55:18
    Android系统中的动画分类:视图动画(View Animation)和属性动画(Property Animation)视图动画可分为:补间动画(Tween Animation)和逐帧动画(Frame Animation)补间动画又可分为以下: Alpha Animation:透明度动画 ...
  • 3D动画概述暨骨骼动画实现

    千次阅读 2017-12-20 10:31:53
    引言本文论述了3D领域内的常见动画类型的运作机制。不同于其他文章简单的罗列和介绍每种类型的3D动画,本文尝试以一种优化演进的思路对动画运作机理进行递进式推演,在这个过程中自然而然的推导出常见的几种3D动画...
  • pyecharts图表类型分类和配置项

    千次阅读 2019-11-24 19:00:51
    AnimationOpts:Echarts 画图动画配置项 InitOpts:初始化配置项 ToolBoxFeatureOpts:工具箱工具配置项 ToolboxOpts:工具箱配置项 BrushOpts:区域选择组件配置项 TitleOpts:标题配置项 DataZoomOpts:区域...
  • Android动画之旅-Android动画基本介绍

    千次阅读 2016-04-13 17:18:22
    在上一篇博客中,我们简单了解了在Android中的动画特效,小伙伴们是不是意犹未尽呀。还没有看的猛戳这里:Android动画之旅一开篇动画简介 本篇博客,将和大家一起来分析Android中的四大动画,准备好了吗?GO~ GO~ GO...
  • Android动画进阶—使用开源动画库nineoldandroids

    万次阅读 多人点赞 2013-12-28 23:47:12
    Android系统支持原生动画,这为应用开发者开发绚丽的界面提供了极大的方便,有时候动画是很必要的,当你想做一个滑动的特效的时候,如果苦思冥想都搞不定,那么你可以考虑下动画,说不定动画轻易就搞定了。...
  • Android中的动画

    千次阅读 2017-05-09 06:12:25
    学习内容Ø 帧动画Ø 补间动画Ø 动画方式切换组件能力目标Ø 掌握Android中动画的基本概念及分类Ø 熟练掌握帧动画的实现Ø 熟练掌握各种补间动画的实现Ø 掌握如何使用动画方式实现组件之间的切换效果本章...
  • Android动画之视图动画

    千次阅读 2016-09-17 13:12:11
    前言 动画在Android中是一个相当于重要的知识点,使用场景也很多,炫酷的界面效果少不了动画来提升,这里我们就先来说说Android中的动画,在说Android的动画之前,我们先来了解一下动画这个效果的通用含义。...
  • Android动画(一):View动画(补间动画)

    千次阅读 2016-08-07 10:00:32
    二、分类:View动画(补间动画)、帧动画、属性动画.三、详细介绍: ①View动画(补间动画):通过对场景里的对象不断做图像变换(平移、缩放、旋转、透明度),而产生动画效果,是一种渐进的动画,还可以自定义。②帧...
  • iOS动画解析

    万次阅读 2016-04-25 21:40:43
    iOS引入动画效果可以使我们的软件得到更好的用户体验,因此动画的深入研究无疑对于开发者一个很好的加分项。 常见的iOS对动画的操作分为两类: CALayer层的操作 UIView的操作 二者有何区别 UIView里面包含有一个...
  • Android动画浅析

    千次阅读 2014-10-03 20:27:46
    在应用的开发中,动画是必不可少的一部分,否则很多视觉效果会显得特别突兀。今天我们就来了解一下Android中的动画库。
  • Android动画深入分析

    千次阅读 2016-10-02 23:09:54
    动画分类Android动画可以分3种:View动画,帧动画和属性动画;属性动画为API11的新特性,在低版本是无法直接使用属性动画的,但可以用nineoldAndroids来实现(但是本质还是viiew动画)。学习本篇内容主要掌握以下...
  • Flutter补间动画

    千次阅读 2019-08-23 16:54:29
    分类 Flutter 动画分为两类:补间动画(Tween)和 基于物理的动画。 本文主要介绍第一类动画动画的基本类 Animation<T> Animation是一个抽象的类,主要保存动画的状态和当前值。最常用的Animation类时...
  • 动画分类:  1、帧动画(Frame)  类似电影胶片,由很多帧图片,通过不间断的改变,来产生动画效果。  2、补间动画(Tween)  对View控件进行变换(平移,缩放,旋转,透明度)来产生动画效果。  ...
  • Android动画之补间动画TweenAnimation

    千次阅读 2018-12-28 10:03:03
    前面分析了Animation基类,然后简单概述了动画原理。Animation动画概述 下面讲解如何使用Animation的子类,包括: translate (平移动画) — TranslateAnimation scale (缩放动画) — ScaleAnimation rotate ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,001
精华内容 12,800
关键字:

动画类型分类