XML implementation of of three Animation effects for graphic images and animations developed by Android
- 2020-05-09 19:18:18
- OfStack
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 insertersaccelerate_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 < alphaandroid: 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 < scaleandroid: 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;
}
}