文档章节

Android Animations 3D flip

Donald Yang
 Donald Yang
发布于 2016/06/20 19:13
字数 1966
阅读 50
收藏 0

Android Animations 3D flip

In this post we are going to look at how to create a 3D flip animation, with a FrameLayout.

In the first few posts I've written on Android and animations we have only looked at the predefined animations supplied in the android.view.animations package. In fact we've only used the translate animation, but as I've mentioned before there are also rotate, scale and alpha animations.

In this tutorial i want to take a further look at animations and how we can created our own custom animations using the Android library. I've going to base the tutorial on some of the examples that can be found in the samples folders that are downloaded with the android SDK. These are some great examples, but unfortunately they seem to lack a little on documentation and explanation as to how, and what, the code is doing. Hopefully by the end of this tutorial things should be a little clearer.

Before we start here's an example of the end result of our 3d flip:







So lets get started. First Create a new Android project in Eclipse with these setting:
Project name: Flip3d
Application Name: Flip3d
package name: com.example.flip3d
Activity: Flip3d

I've used some firefox image icons to animate, they are part of a very good and free icon set that can be found here . If you just want the images i've used they can be found here and here . Download these images and place them in the res/drawable folder of the Flip3d project.

Lets start with defining a layout that we can use. As I mentioned we are going to use a FrameLayout. As with the ViewFlipper the FrameLayout can contain a number of child views, but unlike ViewFlipper, FrameLayout stacks it's child views on top of each other with the most recent added child on top. Initially without any intervention all the child views of the FrameLayout are visible, but don't worry about that for now, we will solve this at a later stage. In the FrameLayout we will define two child views, these are the views that we will animate between. In res/layout edit the main.xml file so that it looks like this:
 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="@+id/notelist" layout="@layout/first_view" />
<include android:id="@+id/notelist" layout="@layout/second_view" />
</FrameLayout>
This is the frame layout and we've specified that it contains two child views, first_view and second_view. Lets Create these views. In res/layout create two files first_view.xml and second_view.xml. The first view file needs to look like this:
 
<RelativeLayout android:id="@+id/Layout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<mageView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:id="@+id/ImageView01"
android:layout_height="wrap_content"
android:src="@drawable/firefox"
>
</ImageView>
</RelativeLayout>
And second_view.xml contains this xml:
 
<RelativeLayout android:id="@+id/Layout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:id="@+id/ImageView02"
android:layout_height="wrap_content"
android:src="@drawable/firefox_alt"
>
</ImageView>
</RelativeLayout>
These two views are almost identical and only contain two different images that we will flip between.Now we have our layouts defined we need to write some Java to implement our 3d flip. Create a Java class called Flip3dAnimation in the com.example.flip3d package and cut and paste in this code:
package com.example.flip3d;

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.animation.Animation;
import android.view.animation.Transformation;

public class Flip3dAnimation  extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mCenterX;
private final float mCenterY;
private Camera mCamera;

public Flip3dAnimation(float fromDegrees, float toDegrees,
   float centerX, float centerY) {
mFromDegrees = fromDegrees;
mToDegrees = toDegrees;
mCenterX = centerX;
mCenterY = centerY;
}

@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}

@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);

final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;

final Matrix matrix = t.getMatrix();

camera.save();

camera.rotateY(degrees);

camera.getMatrix(matrix);
camera.restore();

matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);

}

}
Custom Animation class

This class extends the Animation class and implements the applyTransformation method. Each Animation has a transformation object that Defines the transformation to be applied at a point in time of the Animation. When this animation is running the applyTransformation method will be called a number of times to allow us to calculate the transformation to be applied. Each time applyTransformation is called the interpolation value passed in will be increased slightly starting at 0 and ending up at 1. So our float 'degree' at line LINE NUMBER will increase slightly each time this method is called.

The main steps that happen in the applyTransformation are:

Calculate the degrees rotation for the current transformation
Get the tranformation matrix for the Animation
Generate a rotation matrix using camera.rotate(degrees)
Apply that matrix to the Animation transform
Set a pre translate so that the view is moved to the edge of the screen and rotates around it centre and not it's edge
Set a post translate so that the animated view is placed back in the centre of the screen.

Camera in android.graphics

You can see that we also use the android.graphics.Camera class, don't get this confused with camera class in android.hardware which is used to control the Camera on the android device. The Camera class in the android.graphic package is very different, it is used to calculate 3d transformations that can then be applied to animations. This Camera class represents a virtual view as if we were looking at our Android views through a camera. As we move our virtual camera to the left , we have the effect of the android view moving to the right , and if we rotate our virtual camera, we have the effect of rotating our Android view. Here the Camera class is use to calculate a rotate transformation about the Y axis, it does this every time the applyTransformation method is called and so gives each incremental transformation that is needed to give a smooth rotation effect. Camera uses transformation matrices to store and calculate transforms. It's not really necessary to have an in depth knowledge of how transformation matricies work, but a good article on them can be found here . The article is based around flash, but the same principles apply.

Now that we've got our rotation animation we need to come up with a plan of how to use it. We currently have two images but just rotating these isn't going to give us the effect we want. So what we need to do is hide the second image and display only the first. We will then rotate this image through 90 degree until it's edge on and we can no longer see it. At this point we will make the first image invisible and the second image visible, we will start the animation of the second image at a 90 degree angle and then roatate round until it is fully visible. To go back from the second to the first image we will just reverse the process.

We'll start with our main Activity class Flip3d.java:

package com.example.flip3d;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.widget.ImageView;

public class Flip3d extends Activity {


private ImageView image1;
private ImageView image2;

private boolean isFirstImage = true;


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

image1 = (ImageView) findViewById(R.id.ImageView01);
image2 = (ImageView) findViewById(R.id.ImageView02);
image2.setVisibility(View.GONE);

image1.setOnClickListener(new View.OnClickListener() {
   public void onClick(View view) {
    if (isFirstImage) {       
     applyRotation(0, 90);
     isFirstImage = !isFirstImage;

    } else {    
     applyRotation(0, -90);
     isFirstImage = !isFirstImage;
    }
   }
});          
}

private void applyRotation(float start, float end) {
// Find the center of image
final float centerX = image1.getWidth() / 2.0f;
final float centerY = image1.getHeight() / 2.0f;

// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Flip3dAnimation rotation =
       new Flip3dAnimation(start, end, centerX, centerY);
rotation.setDuration(500);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(new DisplayNextView(isFirstImage, image1, image2));

if (isFirstImage)
{
image1.startAnimation(rotation);
} else {
image2.startAnimation(rotation);
}

}
}
In the main activity class we have the usual onCreate method. In this method we get references to the two images that we are displaying. Here we also set the visibility of our second image to View.Gone. The final thing to be done in onCreate is to set up a click listener for our fist image (we don't need a click listener for the second image). In the click listener we have a boolean, isFirstImage, which tells us which image is currently visible, if it's true the first image is visible and if false the second image is visible. Depending on which image is visible, we call the applyRotation method with different start and end values, since we rotate the first image in a different direction to the second image.

The applyRotation method is fairly straight forward, we find the centre of our image, create a new instance of our Flip3dAnimation, and apply and start it for the visible image. Well, there's a little more yet... As you may have already noticed we've only done half the animation here, from 0 to 90 degrees, we still have another 90 degrees to go, and we still have to swap the images over half way through. So this is were we need an Animation listener, which we are going to call DisplayNextView. Create a class of this name and paste in this code:
package com.example.flip3d;

import android.view.animation.Animation;
import android.widget.ImageView;

public final class DisplayNextView implements Animation.AnimationListener {
private boolean mCurrentView;
ImageView image1;
ImageView image2;

public DisplayNextView(boolean currentView, ImageView image1, ImageView image2) {
mCurrentView = currentView;
this.image1 = image1;
this.image2 = image2;
}

public void onAnimationStart(Animation animation) {
}

public void onAnimationEnd(Animation animation) {
image1.post(new SwapViews(mCurrentView, image1, image2));
}

public void onAnimationRepeat(Animation animation) {
}
}
The DisplayNextView Animation Listener is very simple and just listens for the end of the rotate animation, Since out first rotate animation only goes from 0 to 90 onAnimatonEnd method will be called when our first image is at 90 degrees. So now we need to Swap the images and this is were out SwapViews class comes in. So create a class called swap views and paste in this code:
package com.example.flip3d;

import android.view.View;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;

public final class SwapViews implements Runnable {
private boolean mIsFirstView;
ImageView image1;
ImageView image2;

public SwapViews(boolean isFirstView, ImageView image1, ImageView image2) {
 mIsFirstView = isFirstView;
 this.image1 = image1;
 this.image2 = image2;
}

public void run() {
 final float centerX = image1.getWidth() / 2.0f;
 final float centerY = image1.getHeight() / 2.0f;
 Flip3dAnimation rotation;

 if (mIsFirstView) {
  image1.setVisibility(View.GONE);
  image2.setVisibility(View.VISIBLE);
  image2.requestFocus();

     rotation = new Flip3dAnimation(-90, 0, centerX, centerY);
 } else {
  image2.setVisibility(View.GONE);
  image1.setVisibility(View.VISIBLE);
  image1.requestFocus();

     rotation = new Flip3dAnimation(90, 0, centerX, centerY);
 }

 rotation.setDuration(500);
 rotation.setFillAfter(true);
 rotation.setInterpolator(new DecelerateInterpolator());

 if (mIsFirstView) {
  image2.startAnimation(rotation);
 } else {
  image1.startAnimation(rotation);
 }
}
}
SwapViews does exactly what its name suggests and swaps the images, setting one image to invisible and the other to visible depending on which image was already visable, but it also does one last important thing, and that is to create and apply the last half of the animation.

You should now have a working flip animation. This technique can also be applied to ViewGroups , so it could be used as a way to transition between different views. There are a few more things that we can do to this animation to improve it such as adding a depth effect, but I'll leave that to another post. Like I mentioned earlier, this example is based on the samples that are in the downloadable SDK files, so have a look at these samples as well.

本文转载自:http://blog.csdn.net/ffyd2000/article/details/4604040

Donald Yang
粉丝 2
博文 56
码字总数 139
作品 0
成都
私信 提问
andriod一个不错的启动菜单显示屏动画效果

看到一个老外做的不错的android启动菜单的动画效果,小结下。 1 首先在drawable目录下放一些动画要用的图片。 2 splash.xml: < LinearLayout xmlns:android="http://schemas.android.com/apk...

长平狐
2012/08/21
505
0
超炫的3D特效程序管理功能android

PC上不说了一些很炫的界面效果很多,其实android上也可以实现很多很COOL的特效。 先看一下效果吧! 相册功能的效果: 下面是加载的andriod 里的程序,用3D效果列出来。这个可以做为android开机...

yumingxinli
2013/02/12
1K
0
andriod一个不错的启动菜单显示屏动画效果

看到一个老外做的不错的android启动菜单的动画效果,小结下。 1 首先在drawable目录下放一些动画要用的图片。 2 splash.xml: < LinearLayout xmlns:android="http://schemas.android.com/apk...

长平狐
2012/08/14
230
0
andriod一个不错的启动菜单显示屏动画效果

看到一个老外做的不错的android启动菜单的动画效果,小结下。 1 首先在drawable目录下放一些动画要用的图片。 2 splash.xml: < LinearLayout xmlns:android="http://schemas.android.com/apk...

长平狐
2012/08/09
1K
0
面向开发者的最佳 Android 库列表

软件库的存在使得Android编码更方便快捷。在如此多 Android库中,我们该如何寻找最合适的一款呢?下面我们做了一个列表供你参考。 动画(Animation) Android View Animations:强大的动画库...

达尔文
2016/11/09
9.2K
16

没有更多内容

加载失败,请刷新页面

加载更多

redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部