翻转动画CustomFlipAnime

翻转动画CustomFlipAnime

import android.graphics.Camera;
import android.graphics.Matrix;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Transformation;

/**
 * 翻转动画
 * @author Administrator
 *
 */
public class CustomFlipAnime {

    private static CustomFlipAnime util;

    public static CustomFlipAnime getInstance() {

        if (util == null) {
            util = new CustomFlipAnime();

        }
        return util;

    }

    /**
     * 翻转动画,且用在view初始化以后
     * @param mContainer
     * @param end 结束的角度
     * @param depthZ 深度,若是同面,深度越大翻转开始view越小,若是反面,深度越大翻转结束view越小
     * @param time 翻转一次的时间
     * @param stopTime 如果可翻转回来,第一次翻转后停留的时间
     * @param mReverse 翻转后是同面还是反面
     * @param isHorizontal 是水平翻转还是垂直翻转
     * @param isBack 是否翻转回来
     */
    public  void startFlipRotation(View mContainer,  float end,float depthZ,int time,int stopTime,boolean mReverse,  boolean isHorizontal,boolean isBack) {
        float start=0;
        final float centerX = mContainer.getWidth() / 2.0f;
        final float centerY = mContainer.getHeight() / 2.0f;

        final CustomRotateAnimation rotation = new CustomRotateAnimation(start, end,
                centerX, centerY, 1800f, mReverse,isHorizontal);

        rotation.setDuration(time);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
        if (isBack) {
            rotation.setAnimationListener(new DisplayAnimationListener(mContainer,start,end,depthZ,time,stopTime,isHorizontal,mReverse));
        }

        mContainer.startAnimation(rotation);
    }

    private  class DisplayAnimationListener implements Animation.AnimationListener {
        private View view;
        private float start;
        private float end;
        private int time;
        private float depthZ;
        private int stopTime;
        private boolean isHorizontal;
        private boolean mReverse;

        private DisplayAnimationListener(View view,float start,float end,float depthZ,int time,int stopTime,boolean isHorizontal,boolean mReverse) {
            this.view = view;
            this.start=start;
            this.end=end;
            this.time=time;
            this.stopTime=stopTime;
            this.depthZ=depthZ;
            this.isHorizontal=isHorizontal;
            this.mReverse=mReverse;
        }

        public void onAnimationStart(Animation animation) {
        }

        public void onAnimationEnd(Animation animation) {

            view.postDelayed(new Runnable() {

                @Override
                public void run() {
                    final float centerX = view.getWidth() / 2.0f;
                    final float centerY = view.getHeight() / 2.0f;
                    CustomRotateAnimation rotation;

                    rotation = new CustomRotateAnimation(end, start, centerX, centerY, depthZ,
                            mReverse,isHorizontal);

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

                    view.startAnimation(rotation);

                }
            }, stopTime);
        }

        public void onAnimationRepeat(Animation animation) {
        }
    }

}

class CustomRotateAnimation extends Animation {
    private final float mFromDegrees;
    private final float mToDegrees;
    private final float mCenterX;
    private final float mCenterY;
    private final float mDepthZ;
    private final boolean mReverse;
    private Camera mCamera;
    private boolean isHorizontal;

    public CustomRotateAnimation(float fromDegrees, float toDegrees,
            float centerX, float centerY, float depthZ, boolean reverse,boolean isHorizontal) {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;
        this.isHorizontal=isHorizontal;

    }

    @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();
        if (mReverse) {
            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
        } else {
            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
        }

        if (isHorizontal) {
            camera.rotateY(degrees);
        }else {
            camera.rotateX(degrees);
        }

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

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}
时间: 2024-11-09 00:32:22

翻转动画CustomFlipAnime的相关文章

CSS图片翻转动画技术详解

因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,IE9完全不支持CSS动画. CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出就连皮克斯动画制作公司也会赞叹的漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家介绍如何创建这种效果. 简单说明:这并不

WPF翻转动画

原文:WPF翻转动画 小丫头比较调皮,为了做个东东来哄一下小丫头,我想到了做一个简单的三维翻转动画.在登录QQ 2013 的时候,我看到登录窗口也有类似的动画. 在WPF中要翻转对象,估计是得用三维变换,所以我用到了AxisAngleRotation3D,让图形绕着Z轴来旋转. 先看看效果. 是的,就是这样的效果,在XAML中,由于涉及三维图形,我先做了两个用户控件,作为正面和背面,然后让它旋转. 设计完用户控件后,就在主窗口上放一个Viewport3D控件,这个是必须的,它是三维模型的容器,如

Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画

原文:Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画 首先,来看下实现后的效果: 关于VisulaState VisualState 指定控件处于特定状态时的外观.例如,按下 Button 时,它的边框颜色可能与正常时的颜色不同.VisualState 类具有更改控件外观的 Storyboard属性.控件进入 VisualState.Name 属性指定的状态时,Storyboard 开始.控件退出该状态时,Storyboard 停止. 以上是silverligh

[UWP]使用CompositionAPI的翻转动画

1. 运行效果 在 使用GetAlphaMask和ContainerVisual制作长阴影(Long Shadow) 这篇文章里我介绍了一个包含长阴影的番茄钟,这个番茄钟在状态切换时用到了翻转动画,效果如上所示,还用到了弹簧动画,可以看到翻转后有点回弹.本来打算自己这个动画效果写的,但火火已经写好了这个FlipSide控件,Github地址在这里,这篇文章就介绍下这个控件的部分原理. 2. TransformMatrix Visual的 TransformMatrix 属性是一个 Matrix4

代码创建 WPF 旋转、翻转动画(汇总)

原文:代码创建 WPF 旋转.翻转动画(汇总) 先建立一个button <Button Width="80" Height="60" Content="旋转" Name="trans" Click="trans_Click" Style="{x:Null}"/> 方法一:绕左上角旋转 public void Transform1() { RotateTransform rtf

点击按钮,使按钮进行左右翻转动画

1 // UIView.transition 2 3 // 1.可以设置从一个View到另一个View的转场动画 4 // UIView.transition(from: <#T##UIView#>, to: <#T##UIView#>, duration: <#T##TimeInterval#>, options: <#T##UIViewAnimationOptions#>, completion: <#T##((Bool) -> Void)?

iOS的view翻转动画实现--代码老,供参考

新建一个view-based模板工程,在ViewController文件中添加下面的代码,即可实现翻转效果: - (void)viewDidLoad { [super viewDidLoad]; //需要翻转的视图 UIView *parentView = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 320, 200)]; parentView.backgroundColor = [UIColor yellowColor]; parentVi

使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果

摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... 使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们希望翻转一个元素后看到的是另一个元素. 查看演示  插件下载 使用CSS3 backface-vis

CSS3 3D翻转动画

CSS3动画属性:transform(变换):大小.位置.颜色.变形等状态的变化transition(过渡):初始状态过渡到结束状态这个过程中产生的动画animation(动画):定义关键帧动画 CSS3可以实现多种动画效果,下面说的是CSS3实现一个3D翻转的动画效果. <div class="container"> <div class="wrapHover> <div class="wrap"> <div c