`
Cb123456
  • 浏览: 66205 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

2D翻转

阅读更多

看到android实现的一个效果视频,就学习一下:

 一、2D翻转:

 呵,我来说就是一张图片先收缩,另一张图片在展开.

 

 二、实现效果:

 
 
 

 三、实现源码:

 Main:

package com.example.card2d;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {

	private ImageView imgeA;
	private ImageView imgeB;
	
	//创建动画
private ScaleAnimation sato1 =new ScaleAnimation(1, 0, 1, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);
private ScaleAnimation sato2 =new ScaleAnimation(0, 1, 1, 1, Animation.RELATIVE_TO_PARENT, 0.5f, Animation.RELATIVE_TO_PARENT, 0.5f);   
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        
        findViewById(R.id.root).setOnClickListener(new OnClickListener() {
			
			public void onClick(View arg0) {
				// TODO Auto-generated method stub

				if(imgeA.getVisibility() == View.VISIBLE){
					
					imgeA.startAnimation(sato1);
				}else{
					
					
					imgeB.startAnimation(sato1);
				}
				
			}
		});
    }


    private void showImgA(){
    	
    	imgeA.setVisibility(View.VISIBLE);
    	imgeB.setVisibility(View.INVISIBLE);
    	
    }

     private void showImgB(){
    	
    	imgeA.setVisibility(View.INVISIBLE);
    	imgeB.setVisibility(View.VISIBLE);
    	
    }
     
     
    private void initView(){
    	imgeA =(ImageView) findViewById(R.id.viA);
    	imgeB =(ImageView) findViewById(R.id.viB);
    	showImgA();
    	sato1.setDuration(500);
    	sato2.setDuration(500);
    	
    	sato1.setAnimationListener(new AnimationListener() {
			
			@Override
			public void onAnimationStart(Animation arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationRepeat(Animation arg0) {
				// TODO Auto-generated method stub
				
			}
			
			@Override
			public void onAnimationEnd(Animation arg0) {
				// TODO Auto-generated method stub
				if(imgeA.getVisibility() == View.VISIBLE){
					imgeA.setAnimation(null);
					showImgB();
					imgeB.startAnimation(sato2);
					
					
				}else{
					
					imgeB.setAnimation(null);
					showImgA();
					imgeA.startAnimation(sato2);
					
					
					
				}
			}
		});
   }
    
}

 

 布局文件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/root"
    tools:context=".MainActivity" >

    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viA"
        android:src="@drawable/c1"
        />
    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viB"
        android:src="@drawable/c2"
        />
</FrameLayout>

 

 四、分析:

 源码很简单,看看就懂了.

 执行过程:

 当鼠标点击的时候,imgeA执行动画1,imgeA进行收缩,当动画1结束时,执行showImgB(),使得imgeA隐藏,imgeB显示,而imgeB的显示效果,就要imgeB执行动画2.

 

 当鼠标第二次点击的时候,imgeB执行动画1,进行图片收缩,当动画结束时,执行showImgA(),使得imgeA显示,imgeB隐藏,imgeA的显示效果,就要imgeA执行动画2.

  • 大小: 7.4 MB
1
0
分享到:
评论

相关推荐

    2D翻转(Android)

    在Android开发中,2D翻转是一种常见的动画效果,它能为用户界面带来生动和交互性的体验。2D翻转通常用于控件如按钮、图片或者整个布局的过渡效果,使得应用看起来更加现代化和吸引人。这个教程我们将深入探讨如何在...

    Android滑屏2D翻转

    在Android开发中,滑屏2D翻转是一种常见的交互效果,通常用于切换界面或展示细节。这个"Android滑屏2D翻转"的demo提供了一个简单易懂的实例,非常适合初学者来理解和实践这一技术。下面我们将深入探讨实现这一效果所...

    2D翻转分页

    实现页面批量图片元素翻页效果,有问题联系我 var page1=["img/blue1.png","img/red1.png","img/white1.png"];//第1页 var page2=["img/blue2.png","img/red2.png","img/white2.png"];//第2页 var page3=["img/blue3...

    wpf窗体翻转,类QQ

    我们可以通过改变`RotateTransform`的角度属性来实现2D翻转,而通过调整`ScaleTransform`的X和Y轴比例,可以实现类似3D翻转的效果。 1. **2D翻转**: - 创建一个新的`RotateTransform`实例,设置其`CenterX`和`...

    页面3D翻转特效

    因此,在开发时需要考虑使用JavaScript库如jQuery或polyfills来提供兼容性解决方案,或者提供降级的2D翻转效果。 7. **性能优化**: 由于3D转换可能对GPU造成较大负担,特别是在大型复杂的3D场景中。为优化性能,...

    cocoscreator 翻牌效果

    这个过程涉及到2D图形渲染、动画帧序列以及用户交互处理等多个方面的技术知识。下面我们将详细探讨如何在CocosCreator中创建翻牌效果。 首先,我们需要了解CocosCreator的基础架构。CocosCreator是一款基于Cocos2d-...

    modernizr.js html5 jquery 3D翻转图片

    4. **兼容性处理**:对于不支持3D转换的浏览器,可以使用JavaScript模拟翻转效果,或者提供一种备选的2D翻转效果。 5. **优化性能**:确保在移动设备上,3D翻转效果不会过于消耗性能。可以考虑限制翻转频率,或者...

    Android代码-Android 横向翻转效果,支持双面的 View 场景

    4. **平滑动画**:库提供了平滑的2D翻转动画,使得页面翻转过程看起来自然且逼真。 5. **可配置性**:开发者可以根据需求调整翻转的速度、角度、方向等参数,以适应不同应用场景。 6. **兼容性**:`EasyFlipView`...

    Cocos2D游戏之旅(四):卡牌翻转效果的实现(下)---源代码

    在本篇【Cocos2D游戏之旅(四):卡牌翻转效果的实现(下)】中,我们将深入探讨如何在Cocos2D游戏引擎中实现引人入胜的卡牌翻转特效。Cocos2D是一款强大的2D游戏开发框架,广泛应用于iOS、Android以及Windows等平台...

    Cocos2D游戏之旅(三):卡牌翻转效果2(只有当鼠标点中卡牌才翻转)

    在本篇中,我们将深入探讨如何使用Cocos2D游戏引擎实现一个更加精确的卡牌翻转效果,即“只有当鼠标点中卡牌时才翻转”。这相对于上一个资源中的“屏幕有点击就翻转”是一个重要的优化,提高了用户体验,让用户能够...

    css3 3D悬停图片翻转洗牌动画特效.zip

    可以通过检测浏览器特性,为不支持的浏览器提供备选方案,如简单的2D翻转或静态图片预览。 此外,由于3D转换可能影响性能,特别是当处理大量元素时,我们可以通过减少不必要的3D转换、优化布局和使用硬件加速来提高...

    android实现2D图片翻转

    在Android平台上,实现2D图片翻转是一种常见的动画效果,可以增强用户界面的交互性和视觉吸引力。本教程将深入探讨如何使用Android的普通动画(Property Animation)系统来创建这种效果,特别是关注`ScaleAnimation`...

    cocos2d3D扑克翻牌特效

    《cocos2d 3D扑克翻牌特效详解——基于OpenGL的实现》 在游戏开发领域,视觉效果的呈现往往能极大地提升玩家的沉浸感。其中,扑克翻牌特效就是一个常见的交互元素,它能为游戏增添趣味性和神秘感。本文将深入探讨...

    html5 canvas左右翻转2d动画

    html5 canvas左右翻转2d动画

    手机端书本翻页效果

    1. **2D CSS3翻页**:这是最常见的一种方法,通过CSS3的transform属性实现2D翻转,如`transform: rotateY(90deg)`。这种方式实现简单,但在某些设备上可能性能不佳,尤其是旧款手机。 2. **3D CSS3翻页**:3D翻页...

    Cocos2D游戏之旅(三):卡牌翻转效果的实现

    本教程将深入探讨如何在Cocos2D框架中实现卡牌翻转效果,以增强玩家的游戏体验。 首先,我们要了解Cocos2D的基本概念。Cocos2D是一个开源的2D游戏开发框架,它提供了丰富的图形绘制、动画控制、物理引擎等功能,...

    使用QWidget实现翻转

    `QTransform`是Qt提供的一个矩阵转换类,可以用来执行2D和3D图形变换,如缩放、旋转和翻转。在翻转过程中,`QTransform`可以用于构建一个包含翻转操作的转换矩阵,然后应用到`QPainter`上。 以下是实现翻转的基本...

    JKFlapView:自定义襟翼视图可制作带有很棒的自定义选项的2D和3D襟翼(从Fabric.io启发而来的襟翼视图)

    2D效果您可以通过初始化2D JKFlippingView来将2D翻转视图添加到您的应用程序,如下所示。JKFlippingView* flippingView2D = [[JKFlippingView alloc ] init2DFlapWithPosition: JKFlapOpening2DPositionTopLeft and2...

    3D图片切换 图片翻转 设置翻转时间

    本主题聚焦于"3D图片切换与图片翻转",特别是通过自封装的Java Archive (JAR) 包实现这一功能,并且能够设置翻转时间,以实现更流畅和动态的视觉效果。 首先,我们要理解3D图片翻转的概念。3D翻转是指在三维空间中...

Global site tag (gtag.js) - Google Analytics