开发者社区> 余二五> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

DEMO:transition3d、运用动画实现图片3d翻转效果

简介:
+关注继续查看

模仿系统apiDemos里的范例,去掉了listview,修改为点击图片后,更新图片并播放3d翻转动画。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
package com.example.aexh_11_transition3d;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
public class MainActivity extends Activity implements OnClickListener
{
    /**
     * 仿照系统的范例,修改成点击图片播放动画更新图片。
     * apiDemos范例: com.example.android.apis.animation
     * Transition3d
     */
    private static final int[] PHOTOS_RESOURCES = new int[]
    { R.drawable.photo1, R.drawable.photo2, R.drawable.photo3, R.drawable.photo4, R.drawable.photo5, R.drawable.photo6 };
    private ImageView mImageview;
    private ViewGroup mLayout;
    private int mPosition;
                                       
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
                                           
        mImageview = (ImageView) findViewById(R.id.imageView1);
        mImageview.setOnClickListener(this);
        mLayout = (ViewGroup) findViewById(R.id.image_layout);// ViewGroup是所有layout的父类
                                           
        /**
         * 下面这句应该是用来压缩大图的,没加上这句运行正常
         */
        // Since we are caching large views, we want to keep their cache
        // between each animation
        mLayout.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);
    }
                                       
    @Override
    public void onClick(View v)
    {
        if (v.getId() == R.id.imageView1)
        {
            // Pre-load the image then start the animation
            mPosition++;
            applyRotation(090);
            mImageview.setImageResource(PHOTOS_RESOURCES[mPosition % 6]);
        }
    }
                                       
    /**
     * Setup a new 3D rotation on the container view.
     *
     * @param position
     *            the item that was clicked to show a picture, or -1 to show the
     *            list
     * @param start
     *            the start angle at which the rotation must begin
     * @param end
     *            the end angle of the rotation
     */
    private void applyRotation(float start, float end)
    {
        // Find the center of the container
        final float centerX = mLayout.getWidth() / 2.0f;
        final float centerY = mLayout.getHeight() / 2.0f;
                                           
        // Create a new 3D rotation with the supplied parameter
        // The animation listener is used to trigger the next animation
        final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, centerX, centerY, 310.0f, true);
        rotation.setDuration(500);
        rotation.setFillAfter(true);
        rotation.setInterpolator(new AccelerateInterpolator());
                                           
        // 监听动画
        rotation.setAnimationListener(new AnimationListener()
        {
            @Override
            public void onAnimationStart(Animation animation)
            {
                                                   
            }
                                               
            @Override
            public void onAnimationRepeat(Animation animation)
            {
                                                   
            }
                                               
            @Override
            public void onAnimationEnd(Animation animation)
            {
                                                   
                mLayout.post(mAaction);// 刷新layout这个View
            }
        });
                                           
        // 启动动画
        mLayout.startAnimation(rotation);
    }
                                       
    Runnable mAaction = new Runnable()
    {
        @Override
        public void run()
        {
            final float centerX = mLayout.getWidth() / 2.0f;
            final float centerY = mLayout.getHeight() / 2.0f;
            Rotate3dAnimation rotation;
                                               
            // mImageView.requestFocus();
                                               
            rotation = new Rotate3dAnimation(90180, centerX, centerY, 310.0f, false);
                                               
            rotation.setDuration(500);
            rotation.setFillAfter(true);
            rotation.setInterpolator(new DecelerateInterpolator());
                                               
            mLayout.startAnimation(rotation);
        }
    };
}


系统实现的动画方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
package com.example.aexh_11_transition3d;
/*
 * Copyright (C) 2007 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.graphics.Camera;
import android.graphics.Matrix;
/**
 * An animation that rotates the view on the Y axis between two specified
 * angles. This animation also adds a translation on the Z axis (depth) to
 * improve the effect.
 */
public class Rotate3dAnimation 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;
                
    /**
     * Creates a new 3D rotation on the Y axis. The rotation is defined by its
     * start angle and its end angle. Both angles are in degrees. The rotation
     * is performed around a center point on the 2D space, definied by a pair of
     * X and Y coordinates, called centerX and centerY. When the animation
     * starts, a translation on the Z axis (depth) is performed. The length of
     * the translation can be specified, as well as whether the translation
     * should be reversed in time.
     *
     * @param fromDegrees
     *            the start angle of the 3D rotation
     * @param toDegrees
     *            the end angle of the 3D rotation
     * @param centerX
     *            the X center of the 3D rotation
     * @param centerY
     *            the Y center of the 3D rotation
     * @param reverse
     *            true if the translation should be reversed, false otherwise
     */
                
                
                
    public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX, float centerY, float depthZ, boolean reverse)
    {
        mFromDegrees = fromDegrees;
        mToDegrees = toDegrees;
        mCenterX = centerX;
        mCenterY = centerY;
        mDepthZ = depthZ;
        mReverse = reverse;
    }
                
    @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));
        }
        camera.rotateY(degrees);
        camera.getMatrix(matrix);
        camera.restore();
                    
        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);
    }
}



215334179.png





本文转自 glblong 51CTO博客,原文链接:http://blog.51cto.com/glblong/1226205,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringCloud微服务实战——搭建企业级开发框架(三十五):SpringCloud + Docker + k8s实现微服务集群打包部署-集群环境部署【下】
• sonarqube默认用户名密码: admin/admin • 卸载命令:docker-compose -f jenkins-compose.yml down -v 六、Jenkins自动打包部署配置   项目部署有多种方式,从最原始的可运行jar包直接部署到JDK环境下运行,到将可运行的jar包放到docker容器中运行,再到现在比较流行的把可运行的jar包和docker放到k8s的pod环境中运行。每一种新的部署方式都是对原有部署方式的改进和优化,这里不着重介绍每种方式的优缺点,只简单说明一下使用Kubernetes 的原因:Kubernetes 主要提供弹性伸缩、服务发现、自我修复,
110 0
nest.js + sms 实现短信验证码登录
今天和大家分享一下使用 nodejs 实现短信验证码登录的方案, 通过对该方案的实现大家可以可以对 nodejs 及其相关生态有一个更深入的理解. 好啦, 话不多说, 我们开始实现.
133 0
前端笔记:css3动画transition和animation
前端笔记:css3动画transition和animation
68 0
基于HTML5 WebGL实现3D飞机叶轮旋转
在上一篇《基于HT for Web矢量实现2D叶轮旋转》中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用。 在3D拓扑上可以创建各种各样的图元,在HT for Web系统中提供了一些常规的3D模型,但是对于那些比较复杂的模型,比如汽车、人物等模型就无能为力了,那再项目中需要用到这样的模型该肿么办呢?这时候就需要借助专业的3ds Max工具来建模了,然后通过3ds Max工具将模型导出成obj文件,然后再项目中引用导出的obj文件,这样就能成功的使用上复杂的图元了。
1042 0
css3中的过渡(transition)
css3 transition(过渡)1.语法: transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-fu...
654 0
基于avd7181c解决视频输入效果差的问题<三>---CVBS无色彩疑难调试手记
基于avd7181c解决视频输入效果差的问题---CVBS无色彩疑难调试手记            笔者在前两篇文章中讲述了基于AVD7181C来解决平台视频输入效果差的问题大概解决方案以及遇到的IIC兼容性问题的解决方法,在本文中将继续解释笔者在调试AVD7181C CVBS输入信号的情况下遇到的没有色彩的问题。
1047 0
+关注
20376
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载