Today’s tech news flash
On September 19, Baidu announced that Yu Zhengjun has joined Baidu as group chief Financial Officer (CFO) to lead the building, development and operation of Baidu’s financial system. Yu will report directly to Robin Li, Baidu’s founder, chairman and CHIEF executive officer. Prior to joining Baidu, Yu Zhengjun worked at Sina Group and Weibo for 13 years. He served as Chief Financial Officer of Sina from 2007 to 2014 and chief Financial Officer of Weibo since 2015, where he contributed to Sina Group’s financing and Weibo’s listing. Before joining Sina, Yu worked in Silicon Valley for Adobe Systems, among other companies. Zhengjun Yu holds a CPA in California, a master’s degree in accounting from the University of Southern California and a bachelor’s degree in economics from the University of California.
Author’s brief introduction
This article from QQ_34902522 submission, detailed explanation of the elastic animation of a variety of implementation, I hope you like!
Qq_34902522 blog address:
http://blog.csdn.net/qq_34902522
preface
Today’s Android development demands are getting closer to reality and improving the user experience. Take the animation effect for example, the previous design to the requirements are more direct, zooming, rotation, movement and other animation effects are finished. Nowadays, in pursuit of that kind of realism in real life, there is often a rebound effect called elastic animation.
Inelastic animation experience
Rendering of inelastic animation:
Let’s look at the code that does this:
Through the renderings, we will feel not real, we want it to be Q, elastic effect
So how do you do that? To look down.
Three ways to realize elastic animation
Way 1:
Interpolator implements elastic effects by interpolator.
Here’s a website about differentiators:
http://inloop.github.io/interpolator/
At this site you can interpolate the effect of each interpolator online to select the desired interpolator. Here we chose Scaling and Library chose Spring. The diagram below:
Interpolator class is then overwritten as follows: interpolator
The next step is to set the differentiator we’ve rewritten into it and look at the code:
Interpolator constructor I interpolator parameter is factor; the greater its value, the slower it will bounce back. Let’s take a look at the results:
It does achieve the elastic effect we want. If you feel that the elasticity is not enough, you can modify the elastic factor. I am using attribute animation here. Interpolator overwritten with a tween animation works equally well.
Way 2:
The second way to make bounce bounce is to use Facebook’s Rebound
How does it work? First we introduce the following dependencies in build.gradle:
Compile ‘com. Facebook. Rebound, rebound: 0.3.8’
Then we first code, according to the code to explain the use of:
To use rebound we need to initialize both the SpringSystem object and the Spring object. Spring allows you to set the initial and end values for animation properties. Spring needs to add a SpringListener interface, and the SimpleSpringListener I use in the code is the implementation class for SpringListener. (ps:addListener, if you new a SpringListener, you need to rewrite all the methods, no need, whichever is needed.) Let’s look at the definition of the SpringListener interface
We just rewrite the method for whatever requirement we need. The above code has the SpringConfig object in it. Looking at the source code, its constructor accepts two variables: 1.tension and 2.friction. What does it do? It’s easy to understand that the greater the tension, the more elastic, the greater the friction, the less elastic effect. The default tension and friction values are as follows:
So let’s see what the rebound looks like:
The elastic effect can be changed by changing the tension and friction values.
Listen to 3:
Let’s talk about the last implementation. This is achieved by introducing officially provided SpringAnimation. The second way above we are using the framework launched by Facebook, now let’s have a look at the official effect of Google.
First we introduce dependencies in the build.gradle file:
The compile ‘com. Android. Support: support – dynamic – animation: 25.3.1’
Next code:
I will not go into details about the specific usage of this, but can refer to:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/0330/7757.html
This link is quite detailed. Let’s take a look at what happens with SpringAnimation.
If you are not happy with the bounciness of the bounciness animation you can do so by working out setBounciness () and setDampingRatio(). Note that the lower the bounces, the better the bounces and the longer the bounces. The larger the value of DampingRatio, the worse the elastic effect.
The difference between
We can use all three of these methods to achieve the elastic effect, so what is the best way to choose? SpringAnimation sets animation effects for multiple properties of a control, such as a view. I set both the zoom animation and the pan animation. You have a lot of code, and rebound is better.
A complete rendering is attached below:
Ok, so that’s the main implementation points of elastic animation. Read the source code for the complete process:
http://blog.csdn.net/qq_34902522/article/details/77651799
Thanks for reading and welcome star.
More and more
Study tired every day, read some funny jokes to relax. Pay attention to the most entertaining public number, have a good mood every day.
If you have a good technical article to share with you, welcome to contribute to my official account, please click “contribution” menu on the official account home page for details.
Please long press the following picture -> the QR code in the identification picture or scan to follow my official account:
