android实现扑克卡片翻转

今天看见一个Android 扑克卡片翻转效果的帖子,于是手痒想学一学,由于接触过的Animation动画等比较少,所以感觉很新奇。

首先,说一下布局,是FrameLayout,这个布局设置一点点击方法,要设置id,之后会用到。这个布局还包括两个子布局,分别是Poke的正面和反面布局。上代码:

还需额外注意一点:这是刚刚才发现的问题,在主activity中,正反面那个xml文件放在后面就会优先默认显示那个xml文件,所以,如果我需要一打开app就看到正面的话,那么正面xml文件需要放到反面xml文件的下面,就是

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:onClick="flipCard"
    android:id="@+id/main_fl_container"
    tools:context="com.example.chenxuanhe.poketest.MainActivity">

    <include layout="@layout/cell_card_back"
        />
    <include layout="@layout/cell_card_front"
        />
</FrameLayout>

根据代码的逻辑线走,则是接下来的两个layout:
这两个FrameLayout也是需要写id的,之后会用到。

cell_card_back.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_fl_card_back"
    >

    <ImageView
        android:src="@drawable/rectangle_back"
        android:contentDescription="@null"
        android:padding="16dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <TextView
        android:textColor="@color/colorAccent"
        android:text="反面"
        android:textSize="40dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

cell_card_front.xml:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_fl_card_front">

    <ImageView
        android:src="@drawable/rectangle_front"
        android:padding="16dp"
        android:contentDescription="@null"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:textSize="40dp"
        android:textColor="@color/colorPrimary"
        android:text="正面"
        android:gravity="center"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

继续顺着上面两个布局的逻辑线来走,就需要用到两个Drawable的文件作为背景图,所以接着看drawable文件:

rectangle_back.xml:

大概是一个黑边红底色带圆角的卡片界面

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="16dp"/>
    <solid android:color="@color/cardBack"/>
    <stroke android:width="2dp"
        android:color="@android:color/black"/>

</shape>

rectangle_front.xml:

大概是一个黑边灰底色带圆角的卡片界面

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="16dp"/>
    <solid android:color="@color/cardFront"/>
    <stroke android:width="2dp"
        android:color="@android:color/black"/>

</shape>

走完界面UI的逻辑线之后,就去看Java代码,发现需要两个Animator,于是在res文件下创建一个animator资源文件夹,在下创建两个动画文件:

anim-in.xml:

这是一个从左边进入的动画,一开始是隐藏的,逆向旋转,当旋转到一半时,显示卡片

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <!--消失-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0"/>

    <!--旋转-->
    <objectAnimator
        android:duration="3000"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0"/>

    <!--出现-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:valueFrom="0.0"
        android:valueTo="1.0"/>

</set>

anim_out.xml:

这是一个右边出去的动画,旋转180度,旋转到一半时,卡片就消失了。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <objectAnimator
        android:duration="3000"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180"/>

    <!--消失-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:valueFrom="1.0"
        android:valueTo="0.0"/>
</set>

接着看Java代码:

MainActivity:

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.main_fl_card_back)
    FrameLayout mFlCardBack;
    @Bind(R.id.main_fl_card_front)
    FrameLayout mFlCardFront;
    @Bind(R.id.main_fl_container)
    FrameLayout mFlContainer;
    private AnimatorSet mLeftInSet;
    private AnimatorSet mRightOutSet;

    private boolean mIsShowBack;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        setAnimation();//设置动画
        setCameraDistance();//设置镜头距离,在这里不是太懂
    }

    private void setAnimation() {
    //mLeftInSet是左边进入的动画
        mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);
   //mRightOutSet是右边出去的动画
        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);

        //点击事件
        //通过ListenerAdapter就不需重写所有方法,只需写需要写的方法
        mRightOutSet.addListener(new AnimatorListenerAdapter() {
        //动画开始时候
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mFlContainer.setClickable(false);
            }
        });
        //动画结束的时候
        mLeftInSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mFlContainer.setClickable(true);//主布局中framelayouy的就允许你去点击了
            }
        });

    }

//一直不是很懂的设置镜头距离,
//帖子上的注释写着:改变视角距离,贴近屏幕
    private void setCameraDistance() {
        int distance = 16000;
        float scale = getResources().getDisplayMetrics().density*distance;
        mFlCardFront.setCameraDistance(scale);//设置距离
        mFlCardBack.setCameraDistance(scale);//设置距离
    }

//这是主Framelayout的点击方法
    public void flipCard(View view){
    //mIsShowBack可以理解为互斥,所以为boolean
        if(!mIsShowBack){
        //右出动画设置在正面卡片界面
            mRightOutSet.setTarget(mFlCardFront);
        //左入动画设置在反面卡片界面    
            mLeftInSet.setTarget(mFlCardBack);
            //开始动画 
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = true;
        }else {
        //右出动画设置在卡片背面界面
            mRightOutSet.setTarget(mFlCardBack);
         //左入动画设置在卡片正面界面
            mLeftInSet.setTarget(mFlCardFront);
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = false;
        }
    }
    //这一点我一直没想到,还可以在onDestroy方法中解绑ButterKnife
    protected void onDestroy(){
        super.onDestroy();
        ButterKnife.unbind(this);
    }
}

到这一步,基本就全部完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2022-05-08

Android利用Camera实现中轴3D卡牌翻转效果

在Android系统API中,有两个Camera类: android.graphics.Camera android.hardware.Camera 第二个应用于手机硬件中的相机相关的操作,本文讲述的是利用第一个Camera类实现中轴3D转换的卡牌翻转效果,开始之前,先看一下Android系统中的坐标系: 对应于三维坐标系中的三个方向,Camera提供了三种旋转方法: rotateX() rotateY() rotateX() 调用这三种方法,传入旋转角度参数,即可实现视图沿着坐标轴旋转的功能.

Android图片翻转动画简易实现代码

下面给大家分享一个有趣的动画:这里比较适合一张图片的翻转,如果是多张图片,可以参考APIDemo里的例子,就是加个ArrayAdapter,还是简单的,也可以自己发挥修改,实现自己想要的.这里的代码基本上可以直接运行项目了. 在main.xml里加个ImageView,如 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:/

android camera yuv帧水平翻转实例

Camera预览时需要对yuv帧做水平翻转处理,直接在onPreviewFrame(byte[] data, Camera camera)里调用Mirror函数,处理完后的图片和预览效果成水平翻转关系. nv21的镜像算法: private void Mirror(byte[] src, int w, int h) { //src是原始yuv数组 int i; int index; byte temp; int a, b; //mirror y for (i = 0; i < h; i++) {

Android实现图片反转、翻转、旋转、放大和缩小

********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

Android动画之3D翻转效果实现函数分析

Android中的翻转动画效果的实现,首先看一下运行效果如上图所示. Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现,那么我们首先来分析一下Animation 和 Transformation. Animation动画的主要接口,其中主要定义了动画的一些属性比如开始时间,持续时间,是否重复播放等等.而Transformation中则包含一个矩阵和alpha值,矩阵是用来做平移,旋转和缩放动画的,而alpha值是用来做alpha动画的,要实现3D旋转动画

Android实现Flip翻转动画效果

本文实例讲述了Android实现Flip翻转动画效果的方法,分享给大家供大家学习借鉴. 具体实现代码如下: LinearLayout locationLL = (LinearLayout) findViewById(R.id.locationLL); LinearLayout baseLL = (LinearLayout) findViewById(R.id.baseLL); private void flipit() { Interpolator accelerator = new Accel

Android实现卡片翻转动画

最近项目上用到了卡片的翻转效果,大致研究了下,也参考了网上的一些Demo,简单实现如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/card_main_container&

android使用FlipAnimation实现3D垂直翻转动画

本文实例为大家分享了android实现3D垂直翻转动画的具体代码,供大家参考,具体内容如下 需求 对ImageView进行类似于翻纸牌的动画 解决 各种Animator的组合 第一步动画: 动画代码文件1,card_flip_left_out.xml <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/a

Android实现文字翻转动画的效果

本文实现了Android程序文字翻转动画的小程序,具体代码如下: 先上效果图如下: 要求: 沿Y轴正方向看,数值减1时动画逆时针旋转,数值加1时动画顺时针旋转. 实现动画的具体细节见"RotateAnimation.Java".为方便查看动画旋转方向,可以将RotateAnimation.DEBUG值设置为true即可.
 RotateAnimation参考自APIDemos的Rotate3DAnimation
 RotateAnimation的构造函数需有三个参数,分别说明动画组件的

Android实现3D翻转动画效果

Android中并没有提供直接做3D翻转的动画,所以关于3D翻转的动画效果需要我们自己实现,那么我们首先来分析一下Animation 和 Transformation. Animation动画的主要接口,其中主要定义了动画的一些属性比如开始时间,持续时间,是否重复播放等等.而Transformation中则包含一个矩阵和alpha值,矩阵是用来做平移,旋转和缩放动画的,而alpha值是用来做alpha动画的,要实现3D旋转动画我们需要继承自Animation类来实现,我们需要重载getTrans

Android Activity跳转动画效果

Activity的跳转动画在5.0的时候做了一个重大的突破,下面来看一下吧 1.5.0之前的overridePendingTransition 相信大家对OverridePendingTransition还是很熟悉的,使用方法也是很简单就是 //fade_in是第二个界面的进入动画,fade_out是第一个界面退出动画,不想动画传入0  overridePendingTransition(R.anim.fade_in,R.anim.fade_out); fade_in : <?xml versi

Android实现红包雨动画效果

本文介绍了Android实现红包雨动画效果,分享给大家,希望对大家有帮助 红包雨 关于实现上面红包雨效果步骤如下: 1.创建一个红包实体类 public class RedPacket { public float x, y; public float rotation; public float speed; public float rotationSpeed; public int width, height; public Bitmap bitmap; public int money;

android实现图片闪烁动画效果的两种实现方式(实用性高)

大家在使用APP的时候,有的APP在点击语音搜索界面后,会出现一个小话筒,小话筒会类似雷达似得在闪烁,表示正在倾听你说话的内容(这个大家可以参照微软的必应APP),那么问题来了,这种动画效果是如何实现的呢?其实实现这种动画效果有很多种方法,最常见的是两种:第一种就是插入n张图片进行切换已达到如此目的,第二种就是通过改变一张图片的透明度来达到闪烁的效果.下面就分别讲一下通过这两种方法如何实现. 第一种:通过n张图片之间切换实现动画效果 这种方法的原理很简单,利用handler的延时机制在子线程中完

Android实现3D云标签效果

本文实例为大家分享了Android实现3D云标签效果的具体代码,供大家参考,具体内容如下 一.自定义View public class TagCloudView extends RelativeLayout { RelativeLayout navigation_bar; TextView mTextView1; private final float TOUCH_SCALE_FACTOR = .8f; private float tspeed; private TagCloud mTagClo

Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

利用Android的ApiDemos的Rotate3dAnimation实现了个图片3D旋转的动画,围绕Y轴进行旋转,还可以实现Z轴的缩放.点击开始按钮开始旋转,点击结束按钮停止旋转. 代码如下:: Rotate3dAnimation.java public class Rotate3dAnimation extends Animation { private final float mFromDegrees; private final float mToDegrees; private fi

基于Android实现3D翻页效果

最近做了一个简单的3D效果翻页特效,先说说我的思路吧,首先我这个翻页效果并不是两个Activity之间的跳转,而是在同一个activity类切换不同的view而已.我现在的做法是单击一个button然后Gone当前的布局,然后把需要呈现的布局visible,在隐藏当前布局的时候启动动画,然后给动画添加监听,在动画结束时开始另外一个view的入场动画就行了. 下面来看下我的主页面的布局文件: <FrameLayout xmlns:android="http://schemas.android

基于JS实现Android,iOS一个手势动画效果

废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve: