Android animation understanding-other animation

其它的动画了解

1. Add animation effects to the layout changes of the ViewGroup object

name	Description
APPEARING	When a View appears in the ViewGroup, the animation set for this View
CHANGE_APPEARING	When a View appears in the ViewGroup, this View affects the position of other Views, and the animation set for other Views.
DISAPPEARING	When a View disappears in the ViewGroup, the animation set for this View.
CHANGE_DISAPPEARING	When a View disappears in the ViewGroup, this View affects the position of other Views, and the animation set for other Views.

LayoutTransition setLayoutTransition

Give a chestnut

LayoutTransition transition = new LayoutTransition();
transition.setDuration(1000);
transition.setAnimator(LayoutTransition.APPEARING, 
	transition.getAnimator(LayoutTransition.APPEARING)); //
transition.setAnimator(LayoutTransition.CHANGE_APPEARING, 
	transition.getAnimator(LayoutTransition.CHANGE_APPEARING));
transition.setAnimator(LayoutTransition.DISAPPEARING, 
	transition.getAnimator(LayoutTransition.DISAPPEARING));
transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, 		
	transition.getAnimator(LayoutTransition.CHANGE_DISAPPEARING));
viewGroup.setLayoutTransition(transition); // 设置 Layout Transition

2. Use StateListAnimator to add animation effects to view state changes

AnimatorInflater.loadStateListAnimator

# xml 中设置  stateListAnimator
<Button
	android:id="@+id/add_btn"
	android:stateListAnimator="@xml/animate_scale"

# 代码中设置
button.setStateListAnimator(AnimatorInflater.loadStateListAnimator(this, R.xml.animate_scale));

# animate_scale.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_focused="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_focused="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

3. Fling animation

// 导入方式
dependencies {
    
    
	implementation 'com.android.support:support-dynamic-animation:28.0.0'
}

// 代码方式
FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
设置速度，摩擦力，动画值的范围
// 以下示例展示了水平投掷。速度跟踪器捕获的速度为 velocityX，且滚动边界值设置为 0 和 maxScroll。摩擦力设置为 1.1。
fling.setStartVelocity(-velocityX)
            .setMinValue(0)
            .setMaxValue(maxScroll)
            .setFriction(1.1f)
            .start();

setStartVelocity(float): Set the initial acceleration, the unit is the changed attribute per second, the default is 0
setMinValue(float): Set the minimum value of the animation. This value is the minimum value of the attribute value in the creation of FlingAnimation, that is to say, the attribute value is not less than this value.
setMaxValue(float): Similar to the above, but the maximum value, min<=attribute value<=max.
setFriction(float): Set friction force. Those who have studied mechanics know that if there is no friction force, it will keep moving; and the greater the friction force, the faster it will stop. The default value is 1.

参考资料： https://developer.android.com/guide/topics/graphics/fling-animation

4. Spring physics animation

导入方式

dependencies {
	def dynamicanimation_version = "1.0.0"
	implementation 'androidx.dynamicanimation:dynamicanimation:$dynamicanimation_version'
}

小栗子

final View img = findViewById(R.id.imageView);
// Setting up a spring animation to animate the view’s translationY property with the final
// spring position at 0.
final SpringAnimation springAnim = new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0);

TRANSLATION_XRepresents the left coordinate.
TRANSLATION_YRepresents the top coordinate.
TRANSLATION_ZIndicates the depth of the view relative to its height.

ROTATION、ROTATION_X 和 ROTATION_Y: These attributes are used to control the 2D (rotation attribute) and 3D rotation of the view around the pivot point.

SCROLL_X 和 SCROLL_Y: These attributes respectively represent the scroll offset (in pixels) of the view from the left and top edges of the source. It also expresses the position in terms of the distance the page scrolls.

ALPHA: Indicates the alpha transparency of the view. The default value is 1 (opaque), and a value of 0 means completely transparent (invisible).

参考资料：https://developer.android.com/guide/topics/graphics/spring-animation

5. Open source animation compatible library NineOldAndroids

The Property Animation API introduced at Api level 11 (Android 3.0 started), but it cannot be used in versions below 3.0.

In order to solve the problems below 3.0, the great god JakeWharton wrote the NineOldAndroids library, and the API can be used on any Android version! ! !

This library will determine the SDK version according to the machine we are running. If it is API3.0 or above, use the animation class that comes with Android, otherwise, use the Nine Old Androids library, which is a compatible library.

Official information

project address

6. SVG animation

One way to achieve complex animations, SVG (Scalable vector Graphics, Scalable Vector Graphics), Android 5.0 began to support SVG graphics; 5.0 the following models, adding appcompat-v7:23.4.0support for compatibility.

A simple DEMO-SVG animation that switches according to state

// strikethru_on.xml   => 通过SVG图片转换成 VectorDrawable
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="64dp"
    android:height="64dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    // 眼睛图案
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z" />
	
	// 斜线的终点
    <path
        android:name="strike"
        android:fillColor="#FFFFFF"
        android:pathData="M4,4L20,20L19,21L3,5Z" />

</vector>

On the contrary, the preview effect of strikethru_off.xml (the only difference is that the pathData of strike is "M4,4L20,20L19,21L3,5Z" and a diagonal line)

switch different SVG animations according to the focus state

// strikethru_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    // 上焦点的时候为 strikethru_on
    <item
        android:id="@+id/checked"
        android:drawable="@drawable/strikethru_on"
        android:state_focused="true" />
    
    // 失去焦点的时候为 strikethru_off
    <item
        android:id="@+id/unchecked"
        android:drawable="@drawable/strikethru_off" />

    // unchecked -> 过渡(strikethru_off_to_on) -> checked(最终状态) 
    <transition
        android:fromId="@id/unchecked"
        android:toId="@id/checked"
        android:drawable="@drawable/strikethru_off_to_on" />
    
    // checked -> 过渡(strikethru_on_to_off) -> unchecked(最终状态)
    <transition
        android:fromId="@id/checked"
        android:toId="@id/unchecked"
        android:drawable="@drawable/strikethru_on_to_off" />

</animated-selector>

Here are all the SVG animations after
focusing to understand the whole idea. From strikethru_off to strikethru_on, the transition animation effect is interspersed.
strikethru_off_to_on.xml associates the line of strike that needs to be animated with the animation strike_toggle_on.

strike is to draw a diagonal line

// strikethru_off_to_on.xml 
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/strikethru_off">

    <!-- Vector图形(strike)与动画关联(strike_toggle_on) -->
    <target
        android:name="strike"
        android:animation="@animator/strike_toggle_on" />

</animated-vector>

// animated-vector ,把 VectorDrawable 和 objectAnimator 连起来

// strike_toggle_on.xml pathData表示的是 vector，valueFrom的矢量 到 valueTo的矢量 的动画
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:propertyName="pathData"
    android:valueFrom="M4,4L20,20L19,21L3,5Z"
    android:valueTo="M4,4L4,4L3,5L3,5Z"
    android:valueType="pathType" />

Finally, the SVG + animation is complete, just like the effect we saw at the beginning

To achieve a complex SVG animation effect

, there is too much code, so I won’t post the code. If you are interested, you can go and see for yourself! ! !
SVG generated by connecting
the drawable file generated by SVG, hands-on
teaching, android uses SVG

Performance comparison

Android Vector svg related information
https://www.youtube.com/watch?v=fgbl34me3kk
http://blog.chengyunfeng.com/?p=1028 SVG复杂动画教程
https://zhuanlan.zhihu.com/p/ 61678845
https://zhuanlan.zhihu.com/p/22013005

Some SVG related tools
http://inloop.github.io/svg2android/ SVG转换工具
https://github.com/sketch-hq/svgo-compressor
https://romannurik.github.io/AndroidIconAnimator/SVG动画生成工具

7. Lottie

Dynamic efficiency AE软件using bodymovin插件Export json数据文件(data.json), last used in Android. (Lottie do animation, professional thing to do professional people, the real liberation of programmer productivity.)

导入方式

dependencies {
    ...
    implementation "com.airbnb.android:lottie:3.4.0"
    ...
}

使用方式

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="data.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />
    
// 或者代码中导入    
animationView.setAnimation("data.json"); 

看看几个官方的效果


使用场景

• Splash animation: a typical scene is the playback of APP logo animation
• Up and down refresh animation: a must-have function for all apps. Lottie can do more simple and cool
• Loading animation: A typical scene is a loading animation requested by the network
• Tips animation: a typical scene is a blank page tip
• Button animation: typical scenes such as switch button, edit button, play button and other button transition animation
• Gift animation: The typical scene is the advanced animation playback of live streaming apps
• View transition animation (through LOTAnimationTransitionController to achieve presentViewController and dismissViewControllerAnimated transition animation)

感兴趣的可以查查资料

json example

Official information

Android usage documentation

Introduction and usage examples of Lottie open source animation library

Some control animation libraries understand

---

Understanding Android Animation—RecyclerView Animator <=Previous Chapter Next Chapter=> Understanding Android Animation—Expanding Knowledge