Android：动画自定义视图 [英] Android: animated custom views

问题描述

编辑2：新的官方培训指南

开发者网站发布了UI相关内容的培训指南，这是索引：

• 动画概述


• 物业动画概述


• 动画可绘制图形


• 使用动画显示或隐藏视图


• 使用动画移动视图


• 使用动画动画移动视图


• 使用缩放动画放大视图


• 使用弹簧物理进行动画移动


• 自动动画布局更新


• 使用转换动画布局更改


• 创建自定义转换动画


• 使用动画启动活动

如果您对以下任何一项感兴趣，请点击链接：

乍一看其他动画看起来有些困难。

但是在打开Show layout bounds之后你可以看到那里没有魔法。基本上这只是一个翻译动画，它将视图从一个位置转换为另一个位置。在该动画的情况下，困难的部分是实现找到平移坐标的算法。之后，通过场景转换动画，动画只需几行代码。

  //假设在此步骤中所有视图都位于x0的初始位置，y0 
 TransitionManager.beginDelayedTransition（rootLayout） ; 
 //这里设置视图坐标为x1，y1  - 最终位置
  

Transitions框架将为你做其余的事。它会找到delta并为您执行动画。 这里你会发现一篇很好的文章 Lucas Rocha 。

EDIT 2: new official training guide

The Developers site released a training guide for UI related stuff, this is the index:

• Animations Overview
• Property Animation Overview
• Animate drawable graphics
• Reveal or hide a view using animation
• Move a View with Animation
• Move views using a fling animation
• Enlarge a view using a zoom animation
• Animate movement using spring physics
• Auto animate layout updates
• Animate layout changes using a transition
• Create a custom transition animation
• Start an activity using an animation

If you are interested in any of these, this is the link: https://developer.android.com/training/animation/

---

EDIT: Answers sum up

I found 5 ways to animate in Android:

1. Animate the properties of a View with Property Animation to smoothly change rotation, alpha, scale etc.

2. Frame Animations (AnimationDrawable): change the pictures quickly, so that it looks animated

3. Design the images with vectors (VectorDrawable) and animate them by editing them over time with AnimatedVectorDrawable.

4. Override onDraw() on a View and perform Custom Drawing by painting in the canvas.

5. Use Lottie, what reproduces animations from After Effects. Many animations available at LottieFiles.

However, Android provides some built-in tools too, such as Scenes (that let you animate the transition among several layouts that share the Views), Shared elements (that lets you make the ilussion of passing a View from one Activity to another one) etc.

Many (if not all) of these features were added in API 21, click here here for more information.

Here are some interesting articles/blogs on animation:

• A subcategory on a Google made website called material.io: Creative customization.

• How we design a beautiful animation: train animation with animated vectors.

• How Android Transitions work.

• Animating to infinity: bluetooth animation with vectors

• Frame Animations in Android: filling up a heart by images rotation.

Last, a couple interesting tools:

• Mac tool to record Android screen on GitHub.

• Video to GIF converter online.

---

Note

I am aware Android provides transformations such as scale, alpha, rotate, translation etc.

Examples

There are 2 examples I would like to look at and compare.

1 - Custom View animations

For example, filling up a glass of water or drawing a path.

2 - Complex View animations

For instance, StackExchange App for Android, login screen animation (couldn't find a video on it, also, didn't check if behaves the same in iOS).

Question

For the first example, I can't think of any other way than playing GIFs, or manually changing images after little time periods.

I do not think this is the case, that's why I would like to ask, (1) do you know how it's done?

Regarding the second example, only one idea came to my mind, and that's setting a Path and moving the View accordingly by passing it somehow after animate(). (2) Is this possible?

Apart from the mentioned above, (3) do you know of other techniques to play animations? (Such as Scene transitions - mentioned in an answer-)

Please share! Thank you.

解决方案

"Filling up a glass of water" animation is direct canditate of implementing via frame animation, i.e. changing pictures one after the other. Here you can see a nice blog post describing how to implement this kind of animation, which basically is the same as "filling up a glass of water" you mentioned:

The other animation look slightly difficult at first glance.

But after turning on "Show layout bounds" you can see there is no magic there. Basically this is just a translation animation, which translates a view from one position to another. In case of this animation the difficult part is to implement the algorithm of finding translation coordinates. After that animating is just a couple lines of code via scene transition animation.

// assuming at this step all the views are at the initial position at x0, y0
TransitionManager.beginDelayedTransition(rootLayout);
// here set view coordinates to x1, y1 - the final position

Transitions framework will do the rest for you. It will find the delta and perform animation for you. Here you will find a nice article by Lucas Rocha.

这篇关于Android：动画自定义视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！