动画（基础）

作者: Pan12321 | 来源:发表于2018-11-16 15:44 被阅读0次

基础动画与关键帧动画
Android Animation
iOS 动画基础总结篇
IOS动画学习小记(3)-Core Animation-基础动画
HTML5+JavaScript动画基础完整版中文pdf扫描
i0S-UIView动画（基础动画+Block动画）
iOS 核心动画～基础动画
动画(二)
iOS动画小结用法
Android 基础动画之属性动画详解

经过一段时间，终于将群英传与开发艺术过一遍，现对其内容进行归纳总结，并写相应的代码：

ps:1.drawable.xml 文件名必须为小写

1.Drawable分类：

1）BitmapDrawable //表示一张图片


  <?xml version="1.0" encoding="utf-8"?>

  <bitmap android:src="@drawable/ic_launcher_background"

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:antialias="true" 1.抗锯齿

    android:dither="true" 2.是否支持抖动

    android:filter="true"3.是否支持过滤

    android:gravity="center" 

    android:mipMap="false"4.是否支持纹理映射

    android:tileMode="mirror"  5.平铺模式： disabled clamp repeat mirror  不支持，拓展，水平与垂直平铺，水平与垂直方向的镜面映射

    />

2）ShapeDrawable //具有渐变的图形图片


  <?xml version="1.0" encoding="utf-8"?>

    <shape xmlns:android="http://schemas.android.com/apk/res/android"

        android:shape="rectangle">

        <corners

            android:bottomLeftRadius="10dp"

            android:bottomRightRadius="10dp"

            android:radius="10dp"

            android:topLeftRadius="10dp"

            android:topRightRadius="10dp">

            <!--圆角-->

        </corners>

        <gradient

            android:angle="90"

            android:centerColor="#213"

            android:centerX="0.5"

            android:centerY="0.5"

            android:endColor="#fff"

            android:gradientRadius="41dp"

            android:startColor="#000"

            android:type="sweep"

            android:useLevel="false">

            <!--1.渐变角度

            2.渐变中心点

            3.渐变开始到结束颜色  radial:环形 line:线形  sweep:扫描式  angle当为sweep时，不起效果

            4.渐变半径：只有设置为type=redial有效

            -->

        </gradient>

        <!--纯色-->

        <!--<solid android:color="#fff"></solid>-->

        <stroke

            android:width="1dp"

            android:color="#000"

            android:dashGap="1dp"

            android:dashWidth="1dp">

            <!--描边：1.边宽度

            2.边颜色

            3.虚线宽度

            4.虚线距离

            -->

        </stroke>

        <padding

            android:bottom="10dp"

            android:left="10dp"

            android:right="10dp"

            android:top="10dp"></padding>

        <size

            android:width="200dp"

            android:height="200dp">

            <!--图片固有大小-->

        </size>

    </shape>

3)layer-list layerDrawable 层叠加


  <?xml version="1.0" encoding="utf-8"?>

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

      <item>

          <shape android:shape="rectangle">

              <solid android:color="#f2f2f2"></solid>

          </shape>

          >

      </item>

      <item

          android:bottom="10dp"

          android:left="10dp"

          android:right="10dp"

          android:top="10dp">

          <shape android:shape="oval">

              <solid android:color="#000"></solid>

          </shape>

          >

      </item>

  </layer-list>

4）sateListDrawable(selector) 更多用于状态改变


  <?xml version="1.0" encoding="utf-8"?>

  <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true" android:dither="true" android:variablePadding="true">

      <!--1.大小不会随状态而改变

          2.防止抖动

          3.padding不随着状态的改变不随着状态的改变而改变

       -->

      <item android:drawable="@drawable/dots_2" android:state_pressed="true"></item>

      <item android:drawable="@drawable/dots_2" android:state_focused="true"></item>

  </selector>

5）levelListDrawable


  <?xml version="1.0" encoding="utf-8"?>

  <level-list xmlns:android="http://schemas.android.com/apk/res/android" >


      <item android:drawable="@drawable/dots_2" android:maxLevel="1"/>

      <item android:maxLevel="1" android:drawable="@drawable/test"></item>

  </level-list>

6)transitionDrawable 淡入淡出效果


  <?xml version="1.0" encoding="utf-8"?>

  两张图片，一张淡入一张淡出

  <transition xmlns:android="http://schemas.android.com/apk/res/android">

      <item android:drawable="@drawable/dots_2"></item>

      <item android:drawable="@drawable/test"></item>

  </transition>

7）内嵌drawable


  <?xml version="1.0" encoding="utf-8"?>

  <inset xmlns:android="http://schemas.android.com/apk/res/android"

      android:inset="10dp">

      <shape android:shape="rectangle">

          <solid android:color="#000"></solid>

      </shape>

  </inset>

8)scaleDrawable 缩小图片


  <?xml version="1.0" encoding="utf-8"?>

  <scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/test"

    android:scaleGravity="center"

    android:scaleHeight="70%"

    android:scaleWidth="70%"

   />

  //scale

  ImageView img2=findViewById(R.id.im_02);

  ScaleDrawable drawable2= (ScaleDrawable) img2.getBackground();

  drawable2.setLevel(1); //设置等级，若默认为0不显示

9）ClipDraWale裁剪图片(感觉可以做个图片处理工具，后续补充项目代码)


<?xml version="1.0" encoding="utf-8"?>

<clip

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/test"

    android:clipOrientation="vertical"

    android:gravity="center_vertical"

    ></clip>

  //clip

  ImageView clip_img=findViewById(R.id.im_clip);

  ClipDrawable cliDra= (ClipDrawable) clip_img.getBackground();

  cliDra.setLevel(5000);//0-10000  10000不裁剪  5000  裁剪50%

2.animation分类：

1)View动画xml：TranslateAnimation scaleAnimation rotateAnimation AlphaAnimation


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:shareInterpolator="false" >

    <!--shareinterpolator :是否指定插值器

       -->

    <translate

        android:fromXDelta="0"

        android:toXDelta="100"

        android:fromYDelta="100"

        android:toYDelta="0"

        ></translate>

    <scale

        android:fromXScale="0.5"

        android:fromYScale="0.5"

        android:toXScale="1"

        android:toYScale="1"

        android:pivotX="100"

        android:pivotY="100"

        ></scale>

    <!-- 1.开始时比例与结束是比例

         2.坐标

    -->

    <alpha

        android:fromAlpha="0.5"

        android:toAlpha="1"

        ></alpha>

    <rotate

        android:pivotY="100"

        android:pivotX="100"

        android:fromDegrees="0"

        android:toDegrees="360"></rotate>

</set>

  final Button bt=findViewById(R.id.bt_anim);

    final Animation animation= AnimationUtils.loadAnimation(this,R.anim.animation_test);

    animation.setDuration(10000);

    bt.startAnimation(animation);

    bt.setOnClickListener(new View.OnClickListener() {

      @Override

      public void onClick(View v) {

        bt.startAnimation(animation);

      }

    });

2)帧动画（顺序播放图片）


  Button bt_02=findViewById(R.id.bt_anim2);

  bt_02.setBackgroundResource(R.drawable.animation_list);

  AnimationDrawable animation1= (AnimationDrawable) bt_02.getBackground();

  animation1.start();


  <?xml version="1.0" encoding="utf-8"?>

  <animation-list xmlns:android="http://schemas.android.com/apk/res/android"

      android:oneshot="false"

      >

      <!--次数设置-->

      <item android:drawable="@drawable/test" android:duration="500"></item>

      <item android:drawable="@drawable/dots_2" android:duration="500"></item>

  </animation-list>

3)特殊场景（LayoutAnimation）适用于ListView等groudView


<?xml version="1.0" encoding="utf-8"?>

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"

    android:animation="@anim/animation_item_test"

    android:animationOrder="normal"

    android:delay="500">

    <!--delay 动画延迟时间 即每一个子元素延迟相应的时间

    animationorder: 动画顺序 normal:顺序 reverse:逆向 random：随机-->

</layoutAnimation>

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500"

    android:shareInterpolator="true" >

       -->

    <scale

        android:fromXScale="0"

        android:fromYScale="1"

        android:toXScale="1"

        android:toYScale="1"

        ></scale>

    <alpha

        android:fromAlpha="0"

        android:toAlpha="1"

        ></alpha>

</set>

  List<String> strings = new ArrayList<>();

  strings.add("111111");

  strings.add("222222");

  strings.add("33333");

  ListView listView = findViewById(R.id.list_001);

  listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, strings));

  final Animation animation = AnimationUtils.loadAnimation(this, R.anim.animation_item_test);

  LayoutAnimationController layoutAnimationController = new LayoutAnimationController(animation);

  layoutAnimationController.setDelay(1f);

  layoutAnimationController.setOrder(LayoutAnimationController.ORDER_RANDOM);

  listView.setLayoutAnimation(layoutAnimationController);

4)特殊场景（activity跳转动画）


enter.xml


  <?xml version="1.0" encoding="utf-8"?>

  <set xmlns:android="http://schemas.android.com/apk/res/android"

      android:shareInterpolator="false"

      android:duration="5000">

      <!--shareinterpolator :是否指定插值器

         -->


      <scale

          android:fromXScale="0"

          android:fromYScale="0"

          android:toXScale="1"

          android:toYScale="1"

          ></scale>

      <alpha

          android:fromAlpha="0"

          android:toAlpha="1"

          ></alpha>

      <rotate

          android:fromDegrees="0"

          android:toDegrees="360"></rotate>

  </set>

exit.xml


<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:shareInterpolator="false"

    android:duration="1000">

    <!--shareinterpolator :是否指定插值器

       -->

    <scale

        android:fromXScale="1"

        android:fromYScale="1"

        android:toXScale="0"

        android:toYScale="0"

        ></scale>

    <alpha

        android:fromAlpha="0"

        android:toAlpha="1"

        ></alpha>

</set>

调用：

   Intent intent =new Intent( getApplicationContext(),MainActivity.class);

  startActivity(intent);

  overridePendingTransition(R.anim.animation_enter,R.anim.animation_exit);

  PS：overridPendingTransition（...）只能调用与startActivity（）或者finish（）后面。

4.属性动画：

1）属性方法调用：


  /**

   * 方法一：封装一个类 使得view有get与set方法

   */

  private void performAnimation() {

    ViewWrapper wrapper = new ViewWrapper(button);

    ObjectAnimator.ofInt(wrapper, "width", 500).setDuration(5000).start();

  }

  /**

   * 方法二：监听方法

   * @param view

   * @param start

   * @param end

   */

  private void performAnimate(final View view, final int start, final int end) {

    ValueAnimator valueAnimator = ValueAnimator.ofInt(1, 100);

    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

      private IntEvaluator mEvaluator = new IntEvaluator();

      @Override

      public void onAnimationUpdate(ValueAnimator animation) {

        int currentValue = (int) animation.getAnimatedValue();

        float fraction = animation.getAnimatedFraction();

        view.getLayoutParams().width = mEvaluator.evaluate(fraction, start, end);

        view.requestLayout();

      }

    });

    valueAnimator.setDuration(5000).start();

  }

基础动画与关键帧动画
UIView基础动画一 UIView基础动画二关键帧动画
Android Animation
Android 动画标签（空格分隔）： android animation 动画基础 Android 基础动画分...
iOS 动画基础总结篇
iOS 动画基础总结篇 iOS 动画基础总结篇
IOS动画学习小记(3)-Core Animation-基础动画
Core Animation - 基础动画 CAAnimation：核心动画的基础类(不能直接使用)，负责动画运行...
HTML5+JavaScript动画基础完整版中文pdf扫描
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介...
i0S-UIView动画（基础动画+Block动画）
UIView基础动画 UIView基础动画Api介绍：使用例子1：使用例子2： UIView-Block动画 ...
iOS 核心动画～基础动画
核心动画之基础动画（CABasicAnimation）概述基础动画主要用于完成对象指定动画属性两个Value之...
动画(二)
这期动画是对基础动画的一个小结。动画的基本属性请看：iOS动画一说到总结基础动画再总结下属性吧。想要的动画的动画...
iOS动画小结用法
CABasicAnimation：基础动画 CAKeyframeAnimation:关键帧动画贝塞尔曲线和基础动...
Android 基础动画之属性动画详解
上两篇文章主要介绍了 Android 基础动画之帧动画以及 Android 基础动画之补间动画。本篇文章主要介...