精华内容
下载资源
问答
  • 收集Android的animation四种类型组成 Android动画模式 Animation主要有两种动画模式: 一种是tweened animation(渐变动画) 一种是frame by frame(画面转换动画) 如何在XML文件中定义动画 ①...
    收集Androidanimation四种类型组成

    1.png 
    Android动画模式

    Animation主要有两种动画模式:

    一种是tweened animation(渐变动画) 

    一种是frame by frame(画面转换动画) 

    如何在XML文件中定义动画

    ① 打开Eclipse,新建Android工程
    ② res目录中新建anim文件夹
    ③ anim目录中新建一个myanim.xml(注意文件名小写)
    ④ 加入XML的动画代码

    <span style="background-color: rgb(255, 255, 255);"><?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
      <alpha/>
      <scale/>
      <translate/>
      <rotate/>
    </set></span>

      Android动画解析--XML


    <alpha>

    <?xml version="1.0" encoding="utf-8"?>
    <alpha
    android:fromAlpha="0.1"
    android:toAlpha="1.0"
    android:duration="3000"
    />
    <!-- 透明度控制动画效果 alpha
            浮点型值:
                fromAlpha 属性为动画起始时透明度
                toAlpha   属性为动画结束时透明度
                说明:
                    0.0表示完全透明
                    1.0表示完全不透明
                以上值取0.0-1.0之间的float数据类型的数字
             
            长整型值:
                duration  属性为动画持续时间
                说明:    
                    时间以毫秒为单位
    -->
    </set>

     

      <scale>

    <?xml version="1.0" encoding="utf-8"?>
       <scale 
              android:interpolator=
                         "@android:anim/accelerate_decelerate_interpolator"
              android:fromXScale="0.0"
              android:toXScale="1.4"
              android:fromYScale="0.0"
              android:toYScale="1.4"
              android:pivotX="50%"
              android:pivotY="50%"
              android:fillAfter="false"
              android:duration="700" />
    </set>
    <!-- 尺寸伸缩动画效果 scale
           属性:interpolator 指定一个动画的插入器
            在我试验过程中,使用android.res.anim中的资源时候发现
            有三种动画插入器:
                accelerate_decelerate_interpolator  加速-减速 动画插入器
                accelerate_interpolator        加速-动画插入器
                decelerate_interpolator        减速- 动画插入器
            其他的属于特定的动画效果
          浮点型值:
              
                fromXScale 属性为动画起始时 X坐标上的伸缩尺寸   
                toXScale   属性为动画结束时 X坐标上的伸缩尺寸    
             
                fromYScale 属性为动画起始时Y坐标上的伸缩尺寸   
                toYScale   属性为动画结束时Y坐标上的伸缩尺寸   
             
                说明:
                     以上四种属性值   
         
                        0.0表示收缩到没有
                        1.0表示正常无伸缩    
                        值小于1.0表示收缩 
                        值大于1.0表示放大
             
                pivotX     属性为动画相对于物件的X坐标的开始位置
                pivotY     属性为动画相对于物件的Y坐标的开始位置
             
                说明:
                        以上两个属性值 从0%-100%中取值
                        50%为物件的X或Y方向坐标上的中点位置
             
            长整型值:
                duration  属性为动画持续时间
                说明:   时间以毫秒为单位
     
            布尔型值:
                fillAfter 属性 当设置为true ,该动画转化在动画结束后被应用
    -->

      <translate>

    <?xml version="1.0" encoding="utf-8"?>
    <translate
    android:fromXDelta="30"
    android:toXDelta="-80"
    android:fromYDelta="30"
    android:toYDelta="300"
    android:duration="2000"
    />
    <!-- translate 位置转移动画效果
            整型值:
                fromXDelta 属性为动画起始时 X坐标上的位置   
                toXDelta   属性为动画结束时 X坐标上的位置
                fromYDelta 属性为动画起始时 Y坐标上的位置
                toYDelta   属性为动画结束时 Y坐标上的位置
                注意:
                         没有指定fromXType toXType fromYType toYType 时候,
                         默认是以自己为相对参照物            
            长整型值:
                duration  属性为动画持续时间
                说明:   时间以毫秒为单位
    -->
    </set>

      <rotate>

    <?xml version="1.0" encoding="utf-8"?>
    <rotate
            android:interpolator="@android:anim/accelerate_decelerate_interpolator"
            android:fromDegrees="0"
            android:toDegrees="+350"        
            android:pivotX="50%"
            android:pivotY="50%"    
            android:duration="3000" /> 
    <!-- rotate 旋转动画效果
           属性:interpolator 指定一个动画的插入器
                 在我试验过程中,使用android.res.anim中的资源时候发现
                 有三种动画插入器:
                    accelerate_decelerate_interpolator   加速-减速 动画插入器
                    accelerate_interpolator               加速-动画插入器
                    decelerate_interpolator               减速- 动画插入器
                 其他的属于特定的动画效果
                                
           浮点数型值:
                fromDegrees 属性为动画起始时物件的角度   
                toDegrees   属性为动画结束时物件旋转的角度 可以大于360度  
     
             
                说明:
                         当角度为负数——表示逆时针旋转
                         当角度为正数——表示顺时针旋转             
                         (负数from——to正数:顺时针旋转)  
                         (负数from——to负数:逆时针旋转)
                         (正数from——to正数:顺时针旋转)
                         (正数from——to负数:逆时针旋转)      
     
                pivotX     属性为动画相对于物件的X坐标的开始位置
                pivotY     属性为动画相对于物件的Y坐标的开始位置
                     
                说明:        以上两个属性值 从0%-100%中取值
                             50%为物件的X或Y方向坐标上的中点位置
     
            长整型值:
                duration  属性为动画持续时间
                说明:       时间以毫秒为单位
    -->
    </set>

      如何使用XML中的动画效果

    public static Animation loadAnimation (Context context, int id)
    //第一个参数Context为程序的上下文   
    //第二个参数id为动画XML文件的引用
    //例子:
    myAnimation= AnimationUtils.loadAnimation(this,R.anim.my_action);
    //使用AnimationUtils类的静态方法loadAnimation()来加载XML中的动画XML文件


      如何在Java代码中定义动画

    //在代码中定义 动画实例对象
    private Animation myAnimation_Alpha;
    private Animation myAnimation_Scale;
    private Animation myAnimation_Translate;
    private Animation myAnimation_Rotate;
         
        //根据各自的构造方法来初始化一个实例对象
    myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);
     
    myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
     
    myAnimation_Translate=new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);
     
    myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
                   Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

     

      Android动画解析--JavaCode


    AlphaAnimation

    ① AlphaAnimation类对象定义

    private AlphaAnimation myAnimation_Alpha;

      ② AlphaAnimation类对象构造

    AlphaAnimation(float fromAlpha, float toAlpha)
    //第一个参数fromAlpha为 动画开始时候透明度
    //第二个参数toAlpha为 动画结束时候透明度
    myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);
    //说明:
    //                0.0表示完全透明
    //                1.0表示完全不透明

      ③ 设置动画持续时间

    myAnimation_Alpha.setDuration(5000);
    //设置时间持续时间为 5000毫秒

      ScaleAnimation

    ① ScaleAnimation类对象定义

    private AlphaAnimation myAnimation_Alpha;

      ② ScaleAnimation类对象构造

    ScaleAnimation(float fromX, float toX, float fromY, float toY,
               int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    //第一个参数fromX为动画起始时 X坐标上的伸缩尺寸   
    //第二个参数toX为动画结束时 X坐标上的伸缩尺寸    
    //第三个参数fromY为动画起始时Y坐标上的伸缩尺寸   
    //第四个参数toY为动画结束时Y坐标上的伸缩尺寸 
    /*说明:
                        以上四种属性值   
                        0.0表示收缩到没有
                        1.0表示正常无伸缩    
                        值小于1.0表示收缩 
                        值大于1.0表示放大
    */
    //第五个参数pivotXType为动画在X轴相对于物件位置类型 
    //第六个参数pivotXValue为动画相对于物件的X坐标的开始位置
    //第七个参数pivotXType为动画在Y轴相对于物件位置类型  
    //第八个参数pivotYValue为动画相对于物件的Y坐标的开始位置
    myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
                 Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

      ③ 设置动画持续时间

    myAnimation_Scale.setDuration(700);
    //设置时间持续时间为 700毫秒

      TranslateAnimation


    ① TranslateAnimation类对象定义

    private AlphaAnimation myAnimation_Alpha;

      ② TranslateAnimation类对象构造

    TranslateAnimation(float fromXDelta, float toXDelta,
                           float fromYDelta, float toYDelta)
    //第一个参数fromXDelta为动画起始时 X坐标上的移动位置   
    //第二个参数toXDelta为动画结束时 X坐标上的移动位置     
    //第三个参数fromYDelta为动画起始时Y坐标上的移动位置    
    //第四个参数toYDelta为动画结束时Y坐标上的移动位置

      RotateAnimation

    ① RotateAnimation类对象定义

    private AlphaAnimation myAnimation_Alpha;

      ② RotateAnimation类对象构造

    RotateAnimation(float fromDegrees, float toDegrees,
                int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
    //第一个参数fromDegrees为动画起始时的旋转角度   
    //第二个参数toDegrees为动画旋转到的角度  
    //第三个参数pivotXType为动画在X轴相对于物件位置类型 
    //第四个参数pivotXValue为动画相对于物件的X坐标的开始位置
    //第五个参数pivotXType为动画在Y轴相对于物件位置类型  
    //第六个参数pivotYValue为动画相对于物件的Y坐标的开始位置
    myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
                   Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);

      ③ 设置动画持续时间

    myAnimation_Rotate.setDuration(3000);
    //设置时间持续时间为 3000毫秒



    版权声明:本文为博主原创文章,未经博主允许不得转载。

    转载于:https://www.cnblogs.com/xieping/p/4666292.html

    展开全文
  • Android 动画类型详解

    2017-01-26 17:52:39
    什么是动画  动画有下面两种情况 ...动画分类 View Animation 视图动画Drawable Animation 图片动画  Android 中提供了两种实现动画的方式 纯编码的方式Xml配置的方式
    什么是动画
    •  动画有下面两种情况
      • 同一个图形通过视图在界面上进行透明度,缩放,旋转,平移的变化(View 动画)
      •  同一个位置上不断切换显示不同的图片(Drawable 动画)
    • 动画的分类
      • View Animation  视图动画
      • Drawable Animation 图片动画
    •  Android 中提供了两种实现动画的方式
      • 纯编码的方式
      • Xml配置的方式


    View动画分类
    • 单一动画(Animation)
      • 缩放动画(ScaleAnimation)
      • 透明度动画(AlphaAnimation)
      • 旋转动画(RotateAnimation)
      • 平移动画(TranslateAnimation)
    • 复合动画(AnimationSet)
      • 由多个单一动画组合在一起的动画




    Animation 的公用功能
    • setDuration(long durationMills)  设置持续时间
    • setStartOffset(long startOffset) 设置延迟时间
    • setFillBefore(boolean fillBefore) 是否停在起始状态
    • setFillAfter(boolean fillAfter) 是否停在最终状态
    • setAnimationListener(AnimationListener listener)
    • 坐标类型
      • Animation.ABSOLUTE
      • Animation.RELATIVE_TO_SELF
      • Animation.RELATIVE_TO_PARENT
    • 启动动画 view.startAnimation(animation)
    • 结束动画 view.clearAnimation()
    • 动画监听器 AnimationListener
      • onAnimationStart(Animation animation)
      • onAnimationEnd(Animation animation)
      • onAnimationRepeat(Animation animation)


    缩放动画


    //编码实现缩放
    //1.创建动画对象
    ScaleAnimation scaleAnimation =
            new ScaleAnimation(0.5f, 1.5f, 0, 1,
                    Animation.ABSOLUTE, img.getWidth() / 2, Animation.ABSOLUTE, 0);
    //2.设置
    // 延时开始
    scaleAnimation.setStartOffset(1000);
    //持续时间
    scaleAnimation.setDuration(2000);
    //最终还原
    scaleAnimation.setFillBefore(true);
    //3.启动动画
    img.startAnimation(scaleAnimation);

    Xml ScaleAnimation


    <?xml version="1.0" encoding="utf-8"?>
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="100%"
        android:pivotY="100%"
        android:startOffset="1000"
        android:toXScale="1.5"
        android:toYScale="1.5">
    </scale>

    //.创建动画对象
    //2.设置
    Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);
    //3.启动动画
    img.startAnimation(animation);



    旋转动画

    //编码实现缩放
    //1.创建动画对象
    RotateAnimation rotateAnimation =
            new RotateAnimation(0, 90, Animation.RELATIVE_TO_SELF
                    , 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    //2.设置
    // 延时开始
    rotateAnimation.setStartOffset(1000);
    //持续时间
    rotateAnimation.setDuration(5000);
    //最终还原
    rotateAnimation.setFillBefore(true);
    //3.启动动画
    img.startAnimation(rotateAnimation);

    xml

    <?xml version="1.0" encoding="utf-8"?>
    <rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromDegrees="0"
        android:toDegrees="180"
        android:duration="5000"
        android:pivotX="50%"
        android:pivotY="50%"
        >
    </rotate>



    透明度动画

    AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
    alphaAnimation.setDuration(2000);
    img.startAnimation(alphaAnimation);

    <?xml version="1.0" encoding="utf-8"?>
    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:toAlpha="1"
        android:duration="5000"
        android:fromAlpha="0">
    </alpha>


    平移动画

    TranslateAnimation translateAnimation
            = new TranslateAnimation(Animation.RELATIVE_TO_SELF
            , 0, Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0,
            Animation.RELATIVE_TO_SELF, 1);
    translateAnimation.setDuration(2000);
    img.startAnimation(translateAnimation);

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXDelta="100%p"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="0"
        android:duration="2000">
    </translate>



    复合动画

    //创建透明度动画  并设置
    AlphaAnimation alphaAnimation1 = new AlphaAnimation(0, 1);
    alphaAnimation1.setDuration(2000);
    RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    rotateAnimation1.setStartOffset(2000);
    rotateAnimation1.setDuration(1000);
    //创建旋转动画 并设置
    // 创建复合动画对象
    AnimationSet animationSet = new AnimationSet(false);
    // 添加两个单一动画
    animationSet.addAnimation(alphaAnimation1);
    animationSet.addAnimation(rotateAnimation1);
    //启动复合动画
    img.startAnimation(animationSet);

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha
            android:duration="1000"
            android:fromAlpha="0"
            android:toAlpha="1"/>
        <rotate
            android:fromDegrees="0"
            android:toDegrees="360"
            android:duration="1000"
            android:pivotX="50%"
            android:pivotY="50%"/>
    </set>


    Interpilator 属性的使用
    • 用来修饰动画效果,定义东动画的变化率,可以使存在的动画效果accelerated 加速,decelerated 减速 repeated 重复等


    Animation rotateAnim1 = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);
    rotateAnim1.setRepeatCount(Animation.INFINITE);
    //设置线性变化
    rotateAnim1.setInterpolator(new LinearInterpolator());
    img.startAnimation(rotateAnim1);



    图片动画



    <?xml version="1.0" encoding="utf-8"?>
    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
        <item
            android:drawable="@mipmap/img"
            android:duration="500"/>
        <item
            android:drawable="@mipmap/cat"
            android:duration="500"/>
        <item
            android:drawable="@mipmap/img"
            android:duration="500"/>
    </animation-list>


    AnimationDrawable background = (AnimationDrawable) img.getBackground();
    background.start();
    展开全文
  • Android 动画分类

    2016-11-24 17:44:00
    动画类型 下面先来看看Android提供的动画类型。Android的animation由四种类型组成 在XML文件中: alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面...

    一:Tween Animation

    动画类型

    下面先来看看Android提供的动画类型。Android的animation由四种类型组成

    在XML文件中:

    • alpha        渐变透明度动画效果
    • scale        渐变尺寸伸缩动画效果
    • translate  画面转换位置移动动画效果
    • rotate      画面转移旋转动画效果

    那么实现这四种类型的方法有哪些呢

    1 帧动画 Frame  2 补间动画 tween  3 属性动画 property

    二:Frame Animation

    Frame Animation是顺序播放事先做好的图像,跟电影类似。 Android提供了另外一个类AnimationDrawable来定义、使用Frame Animation。

    例子上篇文章有讲到!可以去看下  

     

    转载于:https://www.cnblogs.com/fengfenghuifei/p/6098771.html

    展开全文
  • 一、背景:  合适的动画不仅更能吸引人们的眼球,也能让你的应用... 按技术类型来进行分类,分为三类: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;



    展开全文
  • 动画机制总结

    2017-12-01 19:16:22
    1.1 Android动画类型分类 1.2 Android动画实现方式分类 1.3 按照时间分类 2.Android逐帧动画 2.1 逐帧动画简单介绍 2.2 逐帧动画XML资源文件方式 2.3 逐帧动画代码方式 3.Android补间动画 3.1 补间...
  • Android 中的动画 Animation一, 概要 android3.0之前 执行两种动画, 帧...二,分类动画 Frame补间动画 Tween 透明度补间动画 缩放补间动画 旋转补间动画 移动补间动画属性动画 Property 三, 帧动画 Frame Drawable
  • Android动画简单介绍

    2020-10-13 16:13:50
    Android动画类型分类 Frame Animation:逐帧动画,即顺序播放事先做好的图像,跟电影类似 。 Tween Animation:补间动画,通过对场景里的对象不断做图像变换 ( 平移(0,0) ->(100,100)、缩放、旋转 ) 产生动画...
  • iphone的动画效果类型及实现方法 2011-01-11 13:50:19|分类: c&object c |字号订阅 实现iphone漂亮的动画效果主要有两种方法,一种是UIView层面的,一种是使用CATransition进行更低层次的控制,...
  • view动画的特殊类型 二.帧动画 三.属性动画 属性动画分类 和View动画的区别 插值器与估值器 属性动画的使用 属性动画的监听器 属性动画工作原理 属性动画的注意事项 四.动画注意事项 一.View动画 1...
  • Android 动画

    2017-12-21 17:59:43
    动画分类 补间动画Tween动画动画Frame 动画 属性动画Property animation 补间动画Tween动画 1透明度动画AlphaAnimation 2平移动画TranslateAnimation 3缩放动画ScaleAnimation 4旋转动画 rotate 创建一个...
  • WPF动画

    2019-06-18 09:43:50
    分类: 线性插值过程:在开始值和结束值之间以逐步增减的方式改变属性的动画。...所有数据类型都支持关键帧动画,所有具有(使用插值)常规动画类的数据类型都都有相应的关键帧动画的动画类型 1.简单线性动...
  • Android动画

    2018-04-10 12:00:12
    动画类型 视图动画(View Animation) 补间动画(Tween Animation) 逐帧动画(Frame Animation) 属性动画(Property Animation)–Android3.0(API 11后的新特性) 视图动画(View Animation) 作用对象:视图(View) ...
  • 分享几个自己收藏并且经常用的素材网站,希望可以帮到经常找素材的小伙伴们,觉得不错的,欢迎点赞一下!!!...个人觉得,这是目前国内最专业的MG动画素材、抖音vlog素材网站,素材种类...素材类型包括:抖音vlog库、M...
  • 一、直线感应电机分类及结构直线感应电机主要有扁平型、圆筒型和圈盘型3种类型,其中扁平型应用最为广泛。1.扁平型直线感应电机可以看作是由旋转式感应电机演变而来的。设想把旋转感应电机沿径向剖开,并将圆周展开...
  • Android 属性动画

    2016-05-18 09:03:52
    1、在Android3.0之前,Android中的动画类型有两种,一种是Tween动画(补间动画)、还有一种是Frame动画(帧动画)。 ①Tween动画,这种实现方式可以使视图组件移动、放大、缩小以及产生透明度的变化; ②Frame动画,传统...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 270
精华内容 108
关键字:

动画类型分类