The seventh unit attribute animation and differencer and svg animation

The meaning of property animation

1. Background
With tween animation, why do we need attribute animation?

Tween animation limitations:
1. Tween animation can only define the transformation of two key frames in the four attributes of transparency, rotation, displacement and tilt, but attribute animation can define any attribute changes.
3. Tween animation can only animate UI components (view), but attribute animation can animate any object.
4. The tween animation does not change the attributes of the view, but the visual effects are added.
5. The effect of the tween animation is single

Advantages of attribute animation:
1. Any object can be used, no longer limited to View
2. More than four basic transformations

Attribute animation characteristics

https://www.jianshu.com/p/2412d00a0ce4

ValueAnimator

Implementation in java code

package com.fenghongzhang.anim;

import android.animation.ValueAnimator;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

public class Main2Activity extends AppCompatActivity {
    
    

    private static final String TAG = "Main2Activity";
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        initView();
    }

    public void btn(View view) {
    
    
        ValueAnimator valueAnimator = ValueAnimator.ofInt(btn.getLayoutParams().width, 500);
        //动画时间
        valueAnimator.setDuration(2000);
        //重复次数
        valueAnimator.setRepeatCount(3);
        //重复方向,
        valueAnimator.setRepeatMode(ValueAnimator.REVERSE);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    
                //改变的值
                Integer animatedValue = (Integer) animation.getAnimatedValue();
                Log.i(TAG, "onAnimationUpdate: "+animatedValue);

                btn.getLayoutParams().width = animatedValue;
                btn.requestLayout();
            }
        });

        valueAnimator.start();
    }

    private void initView() {
    
    
        btn = (Button) findViewById(R.id.btn);
    }
}

xml way appears

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="1"
    android:repeatMode="reverse"

    android:propertyName="translationX"
    android:valueFrom="100"
    android:valueTo="400"

    android:interpolator="@android:anim/accelerate_interpolator"
    android:valueType="floatType" />

<!--android:valueFrom="0"   // 初始值
    android:valueTo="100"  // 结束值
    android:valueType="intType" // 变化值类型 ：floatType & intType

//重要
 android:propertyName="rotation" alpha scaleX或者scaleY  translationX 变化的方式. 透明,旋转.移动

    android:duration="3000" // 动画持续时间（ms），必须设置，动画才有效果
    android:startOffset ="1000" // 动画延迟开始时间（ms）
    android:fillBefore = “true” // 动画播放完后，视图是否会停留在动画开始的状态，默认为true
    android:fillAfter = “false” // 动画播放完后，视图是否会停留在动画结束的状态，优先于fillBefore值，默认为false
    android:fillEnabled= “true” // 是否应用fillBefore值，对fillAfter值无影响，默认为true
    android:repeatMode= “restart” // 选择重复播放动画模式，restart代表正序重放，reverse代表倒序回放，默认为restart|
    android:repeatCount = “0” // 重放次数（所以动画的播放次数=重放次数+1），为infinite时无限重复
    android:interpolator = @[package:]anim/interpolator_resource // 插值器，即影响动画的播放速度,下面会详细讲
-->

java code

   public void btn1(View view) {
    
    
        Animator animator = AnimatorInflater.loadAnimator(this, R.animator.bianhua);
        animator.setTarget(btn1);
        animator.start();
    }

Use ObjectAnimator to achieve four kinds of animation

Here I plan to implement four animation frameworks by using ObjectAnimator:

alpha
scaleX/scaleY
translateX/translateY
rotation

java code

public void btn2(View view) {
    
    
//        final ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "alpha", 0, 1);
//        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "translationX", 0, 200);
//        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "translationY", 0, 200, 100);
//        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "scaleX", 1, 5);
//        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "scaleY", 1, 5);
//        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "rotation", 0, 270);
        ObjectAnimator animator = ObjectAnimator.ofFloat(btn, "rotationY", 0, 180, -100);

        animator.setDuration(2000);
        animator.setRepeatCount(2);
        animator.setInterpolator(new AccelerateInterpolator());
//        animator.setInterpolator(new DecelerateInterpolator());
        animator.setRepeatMode(ValueAnimator.RESTART);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
    
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
    
    

            }
        });
        animator.addListener(new Animator.AnimatorListener() {
    
    
            @Override
            public void onAnimationStart(Animator animation) {
    
    
                
            }

            @Override
            public void onAnimationEnd(Animator animation) {
    
    

            }

            @Override
            public void onAnimationCancel(Animator animation) {
    
    

            }

            @Override
            public void onAnimationRepeat(Animator animation) {
    
    

            }
        });
        animator.start();
    }

AnimationSet Animation Collection

AnimatorSet.play(Animator anim): Play the current animation
AnimatorSet.after(long delay): Delay the existing animation for x milliseconds before executing
AnimatorSet.with(Animator anim): Execute
AnimatorSet.after at the same time for the existing animation and the incoming animation (Animator anim): Insert the existing animation after the incoming animation and execute
AnimatorSet.before(Animator anim): Insert the existing animation before the incoming animation and execute
AnimatorSet.playSequentially(Animator... items): the animation in the parameter The list executes
AnimatorSet.playTogether(Animator... items) in turn: the animations in the parameters are executed at the same time

java code

  AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(3000);
        animatorSet.setInterpolator(new LinearInterpolator());

        ObjectAnimator translationX = ObjectAnimator.ofFloat(btn, "translationX", 0, 300);
        ObjectAnimator rotation = ObjectAnimator.ofFloat(btn, "rotation", 0, 720);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(btn, "scaleX", 1, 5);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(btn, "scaleY", 1, 5);
        ObjectAnimator alpha = ObjectAnimator.ofFloat(btn, "alpha", 1, 0);

        //顺序播放
        animatorSet.playSequentially(translationX, rotation, scaleX, scaleY, alpha);
//        animatorSet.playTogether(scaleX, scaleY);

//        animatorSet.play(translationX).before(rotation);
//        animatorSet.play(scaleX).with(scaleY).after(3000).before(alpha);

        animatorSet.start();

svg animation

Introduction
https://www.jianshu.com/p/47b0ae970dd5

Google has added support for SVG vector graphics in Android 5.X, which has far-reaching significance for creating new high-efficiency animations.

1. svg
A. Scalable Vector Graphics (Scalable Vector Graphics)
B. Define vector-based graphics for the network
C. Use XML format to define graphics
D. The image quality will not change when the image is enlarged or changed in size Loss
E. World Wide Web Consortium standards
F. Integral with W3C standards such as DOM and XML

2. Path label
A. M = moveto(x, y): Move the pen to the specified coordinate position, but no drawing occurs.
B. L = lineto(x, y): draw a straight line to the specified coordinate position.
C. H = horizontal lineto(x): draw a horizontal line at the specified x coordinate position.
D. V = vertical lineto(y): draw a vertical line at the specified y coordinate position.
E. C = curveto(x1, y1, x2, y2, endX, endY): cubic Bézier curve
F. S = smooth curveto(x2, y2, endX, endY): cubic Bézier curve
G. G = quadratic Belzier curveto (x, y, endX, endY):
quadratic Belizer curve H. T = smooth quadratic Belizer curveto(endX, endY): the end point after mapping the previous path
I. A = elliptical Arc(rx, ry, xRotation, flag1, flag2, x, y): arc
J. Z = colsepath(): close path
Note:
A. The coordinate axis is centered at (0,0), the x-axis is horizontally to the right, and the y-axis is horizontally downward.
B. All instructions are in upper and lower case. Upper case means absolute coordinates, referring to the global coordinate system; lower case means relative coordinates, referring to the coordinate system of the parent container.
C. The space between instruction and data can be omitted.
D. The same instruction can be used multiple times.

3. Example
drawable/vector.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="110"
    android:viewportHeight="110">
    <group
        android:name="test"
        android:pivotX="55"
        android:pivotY="55">
        <path
            android:pathData="M 26,50
                              a 25,25,0,0,0,25,25"
            android:strokeWidth="2"
            android:strokeColor="@android:color/holo_blue_bright" />
    </group>
</vector>

animator / anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="5000"
        android:interpolator="@android:anim/overshoot_interpolator"
        android:propertyName="rotation"
        android:repeatCount="3"
        android:startOffset="-1"
        android:valueFrom="0"
        android:valueTo="360" />
</set>

drawable/animated_vector.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector">
    <target
        android:name="test"
        android:animation="@animator/anim" />
</animated-vector>

layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/animated_vector" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:text="button" />
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        findViewById(R.id.button).setOnClickListener(v -> {
    
    
            ImageView imageView = findViewById(R.id.image_view);
            AnimatedVectorDrawable animationDrawable = (AnimatedVectorDrawable)imageView.getDrawable();
            animationDrawable.start();
        });
    }

Property animation reference link

https://blog.csdn.net/harvic880925/article/details/50598322