Android UI Development 41st-moji weather 3.0 guide interface and animation implementation

The moji weather was upgraded over the weekend. It looks like the guiding interface is doing well. imitating it may be different from the original author's code implementation, but the implementation effect is similar. First, I would like to share my previous article, the basic knowledge of android Animation, Android UI development Article 12th-Animation effect Animation (I), which is not well written, you can also search for knowledge about android animation. Basic knowledge of android animation used to simulate moji.com-weather boot interface animation.

Viewpager-Android is an open-source library for ViewPager that slides upwards in moji.com. ViewPager-Android open source library sets app: orientation to define the sliding direction.

Moji.com has four Views on the weather guide interface. Let's take a look at the following: (all the images introduced here are implemented. They are static images. Run the program to see the animation effect ).

Figure 1 Figure 2

Figure 3 Figure 4

Figure 1 animation effect:

In Figure 1, there are four animation effects, the "extremely low power consumption" icon at the top, the arrow at the bottom, the battery icon at the center and the flashing of the workbook, and the gradient size (scale) at the top) animation effect:

The following describes the attributes of scale:

The bottom arrow indicates that a hybrid animation is used:

A mixed animation is a set that includes the translation animation (translate) and the gradient animation (alpha). A brief description of the two animations is as follows:

The intermediate battery animation uses a combination of rotate and gradient Animation:

The gradient size animation is introduced earlier. The following describes only the rotation Animation:

A frame-by-frame animation implemented by the animation using the animation-list:

Start Anima:

t1_icon1.setImageResource(R.drawable.t1_frame_animation);t1_icon1_animationDrawable = (AnimationDrawable) t1_icon1.getDrawable();t1_icon1_animationDrawable.start();

Figure 2 animation effect:

In Figure 2, the top "very small installation" animation is the same as the bottom arrow animation and in figure 1. It is not described too much. The size gradient animation used in the intermediate animation is the same as the size gradient animation in Figure 1, not much.

Figure 3 animation effect: the top "fast and smooth" animation in Figure 2 is the same as the bottom arrow animation in figure 1, which is not described too much. The intermediate effect uses the cloud movement effect and the Pan animation. The rocket jet effect uses the animation of the animation-list frame by frame. Frame-by-frame animation is not much said. Here, the translation animation is not implemented using xml files. The java code is used. To adapt to multiple screens, you need to calculate the initial position of the translation. The Code defines several positions:

view3.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {@Overridepublic void onGlobalLayout() {// TODO Auto-generated method stubint h1 = centerLayout.getTop();int h2 = centerLayout.getBottom();DensityUtil densityUtil = new DensityUtil(MainActivity.this);int w = densityUtil.getScreenWidth();fx1 = t3_icon2.getTop() + t3_icon2.getHeight();fy1 = -t3_icon2.getTop() - t3_icon2.getHeight();tx1 = -t3_icon2.getWidth() - t3_icon2.getLeft();ty1 = t3_icon2.getTop() + t3_icon2.getLeft()+ t3_icon2.getWidth();fx2 = t3_icon3.getTop() + t3_icon3.getHeight();fy2 = -t3_icon3.getTop() - t3_icon3.getHeight();tx2 = -t3_icon3.getWidth() - t3_icon3.getLeft();ty2 = t3_icon3.getTop() + t3_icon3.getLeft()+ t3_icon3.getWidth();fx3 = w - t3_icon4.getLeft();fy3 = -(w - t3_icon4.getLeft());tx3 = -(h2 - h1 - t3_icon4.getTop());ty3 = h2 - h1 - t3_icon4.getTop();fx4 = w - t3_icon5.getLeft();fy4 = -(w - t3_icon5.getLeft());tx4 = -(h2 - h1 - t3_icon5.getTop());ty4 = h2 - h1 - t3_icon5.getTop();}});

Figure 4 animation effect:

In Figure 4, "moji weather 3.0" uses RotateAnimation, CycleInterpolator for animation interpolation, and gradient size animation for "comprehensive innovation I am ultimate control.

int pivot = Animation.RELATIVE_TO_SELF;CycleInterpolator interpolator = new CycleInterpolator(3.0f);RotateAnimation animation = new RotateAnimation(0, 10, pivot,0.47f, pivot, 0.05f);animation.setStartOffset(500);animation.setDuration(3000);animation.setRepeatCount(1);// Animation.INFINITEanimation.setInterpolator(interpolator);t4_icon1.startAnimation(animation);

The above basically realizes the animation effect of moji weather.

Case apk download
/*** @ Author Zhang xingye * http://blog.csdn.net/xyz_lmn* my Sina Weibo: @ Zhang xingye TBOW*/

Refer:

Http://developer.android.com/guide/topics/resources/animation-resource.html

Http://developer.android.com/reference/android/view/animation/Animation.html