XML implementation of of three Animation effects for graphic images and animations developed by Android

  • 2020-05-09 19:18:18
  • OfStack

Tween Animation is defined using XML
Animation of XML files in the project res/anim directory, this file must contain 1 root element that can be made < alpha > < scale > < translate > < rotate > Interpolate elements or put everything above them < set > In the element group, by default, all animation instructions occur at the same time. In order for them to occur sequentially, a special attribute startOffset needs to be set. The animation's instructions define what kind of transformations you want to take place, when they occur, how long they should take, and whether the transformations are continuous or simultaneous. You make the text content, for example, from the left to move to the right, and then rotate 180 degrees, or rotate at the same time, in the process of moving a conversion need to set up some special parameters 1 (start and end of the size of the size change, start and end of rotation Angle and so on, also can set some basic parameters (for example, start time and cycle), if let several transformations occur at the same time, can give them to set the start of the same time, if according to the sequence, calculation and began to add its cycle time.
Tween Animation common node properties

Property [type] function note Duration[long] Property is the duration of the animation Time is measured in milliseconds fillAfter [boolean] When set to true, the animation transformation is applied after the animation is finished fillBefore[boolean] When set to true, the animation transformation is applied before the animation begins

interpolator

Specifies the interpolator for 1 animation There are some common inserters
accelerate_decelerate_interpolator
Acceleration-deceleration animation inserter
accelerate_interpolator
Acceleration - animation inserter
decelerate_interpolator
Slow down - animation inserter
Others belong to specific animation effects repeatCount[int] The number of times an animation is repeated RepeatMode[int] Define repetitive behavior 1: restart   2: plays backward startOffset[long] The time interval between animations, from how long the last animation stopped to execute the next animation zAdjustment[int] Define animation of Z Order changes 0: keep Z Order the same
1: stay on top
-1: keep it at the bottom

Table 2.

XML node Functional specifications alpha Gradient transparency animation effect < alpha
android: fromAlpha = "0.1"
android: toAlpha = "1.0"
android: / duration = "3000" > fromAlpha

Property to the transparency at the start of the animation

0.0 means full transparency
1.0 means completely opaque
The above value takes the number of the float data type between 0.0 and 1.0

duration is the animation duration, ms unit

toAlpha

[]

Property is transparency at the end of the animation

Table 3

scale Zoom in and out with gradient size < scale
android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
android: fromXScale = "0.0"
android: toXScale = "1.4"
android: fromYScale = "0.0"
android: toYScale = "1.4"
android: pivotX = "50%"
android: pivotY = "50%"
false android: fillAfter = ""
android: startOffset = "700"
android: duration = "700"
android: repeatCount = 10 "/" > fromXScale[float] fromYScale[float] Is the expansion size on the coordinates of X and Y when the animation started 0.0 means zero
1.0 means normal non-scaling
A value less than 1.0 indicates contraction
A value greater than 1.0 indicates amplification toXScale [float]
toYScale[float] Is the stretching size on the coordinates X and Y when the animation ends pivotX[float]
pivotY[float] Is the starting position of the X and Y coordinates of the animation relative to the object Attribute value description: from 0% to 100%, 50% is the midpoint position on the object's X or Y direction coordinates

Table 4 translate Screen shift position move animation effect < translate
android: fromXDelta = "30"
android: toXDelta = "- 80"
android: fromYDelta = "30"
android: toYDelta = "300"
android: / duration = "2000" > fromXDelta
toXDelta Is the position on the X coordinate at the beginning of the end of the animation fromYDelta
toYDelta Is the position on the Y coordinate at the beginning of the end of the animation

Table 5 rotate Screen transfer rotation animation effect < rotate
android: interpolator = "@ android: anim/accelerate_decelerate_interpolator"
android: fromDegrees = "0"
android: toDegrees + = "350"
android: pivotX = "50%"
android: pivotY = "50%"
android: / duration = "3000" > fromDegrees Is the Angle of the object at the beginning of the animation instructions
When the Angle is negative -- that means counterclockwise
When the Angle is positive -- that means we're rotating clockwise
(negative from -- to positive: clockwise rotation)
(negative from -- to negative: counterclockwise rotation)
(positive from -- to positive: clockwise rotation)
(positive from -- to negative: counterclockwise rotation) toDegrees Property: the object can rotate more than 360 degrees at the end of the animation pivotX
pivotY Is the starting bit of the X and Y coordinates of the animation relative to the object Note: the above two attribute values are from 0% to 100%
50% is the midpoint position on the object's X or Y coordinates


Here is a complete definition of XML (provided by SDK)
 
<SPAN style="FONT-SIZE: 18px"><set android:shareInterpolator="false" xmlns:android="http://schemas.android.com/apk/res/android"> 
<scale 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromXScale="1.0" 
android:toXScale="1.4" 
android:fromYScale="1.0" 
android:toYScale="0.6" 
android:pivotX="50%" 
android:pivotY="50%" 
android:fillAfter="false" 
android:duration="700" /> 
<set android:interpolator="@android:anim/decelerate_interpolator"> 
<scale 
android:fromXScale="1.4" 
android:toXScale="0.0" 
android:fromYScale="0.6" 
android:toYScale="0.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:startOffset="700" 
android:duration="400" 
android:fillBefore="false" /> 
<rotate 
android:fromDegrees="0" 
android:toDegrees="-45" 
android:toYScale="0.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:startOffset="700" 
android:duration="400" /> 
</set> 
</set></SPAN> 

Below is a screenshot of one instance of the implementation:
pic
The xml file used is as follows:
1.alpha
 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<alpha 
android:fromAlpha="1.0" 
android:toAlpha="0.0" 
android:startOffset="500" 
android:duration="2000" 
/> 
</set> 

2.rotate
 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<rotate 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromDegrees="0" 
android:toDegrees="360" 
android:pivotX="50%" 
android:pivotY="50%" 
android:duration="2000" 
/> 
</set> 

3.scale
 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<scale 
android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
android:fromXScale="0.0" 
android:toXScale="1.0" 
android:fromYScale="0.0" 
android:toYScale="1.0" 
android:pivotX="50%" 
android:pivotY="50%" 
android:fillAfter="false" 
android:duration="2000" 
/> 
</set> 

4.translate
 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<translate 
android:fromXDelta="10" 
android:toXDelta="100" 
android:fromYDelta="10" 
android:toYDelta="100" 
android:duration="2000" 
/> 
</set> 

The specific implementation source code is as follows:
 
public class Animation_XML_Activity extends Activity { 
private Button button1; 
private Button button2; 
private Button button3; 
private Button button4; 
private ImageView imageView; 
@Override 
protected void onCreate(Bundle savedInstanceState) { 
super.onCreate(savedInstanceState); 
setContentView(R.layout.activity_animation__xml_); 
button1=(Button)findViewById(R.id.button_alpha); 
button2=(Button)findViewById(R.id.button_rotate); 
button3=(Button)findViewById(R.id.button_scale); 
button4=(Button)findViewById(R.id.button_translate); 
imageView=(ImageView)findViewById(R.id.imageview); 
button1.setOnClickListener(new MyButton()); 
button2.setOnClickListener(new MyButton()); 
button3.setOnClickListener(new MyButton()); 
button4.setOnClickListener(new MyButton()); 
} 
class MyButton implements OnClickListener{ 
@Override 
public void onClick(View v) { 
// TODO Auto-generated method stub 
switch (v.getId()) { 
case R.id.button_alpha: 
Alpha(); 
break; 
case R.id.button_rotate: 
Rotate(); 
break; 
case R.id.button_scale: 
Scale(); 
break; 
case R.id.button_translate: 
Translate(); 
break; 
default: 
break; 
} 
} 

} 
public void Alpha() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.alpha); 
imageView.startAnimation(animation); 
} 
public void Rotate() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.rotate); 
imageView.startAnimation(animation); 
} 
public void Scale() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.scale); 
imageView.startAnimation(animation); 
} 
public void Translate() { 
Animation animation=AnimationUtils.loadAnimation(Animation_XML_Activity.this, R.anim.translate); 
imageView.startAnimation(animation); 
} 
@Override 
public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.activity_animation__xml_, menu); 
return true; 
} 
} 

Related articles: