android局部翻转动画,Android实现卡片翻转动画

最近项目上用到了卡片的翻转效果，大致研究了下，也参考了网上的一些Demo，简单实现如下：

activity_main.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/card_main_container"

android:layout_height="match_parent"

android:layout_width="match_parent">

可以看出，用到了两个布局

activity_card_back.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/card_back_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="@dimen/activity_horizontal_margin"

android:layout_marginTop="@dimen/activity_vertical_margin"

android:layout_marginRight="@dimen/activity_horizontal_margin"

android:layout_marginBottom="@dimen/activity_vertical_margin"

android:background="@drawable/shape_card_back_bg"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="背面"

android:textSize="30sp"/>

activity_card_front.xml

xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/card_font_container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginLeft="@dimen/activity_horizontal_margin"

android:layout_marginTop="@dimen/activity_vertical_margin"

android:layout_marginRight="@dimen/activity_horizontal_margin"

android:layout_marginBottom="@dimen/activity_vertical_margin"

android:background="@drawable/shape_card_front_bg"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:text="正面"

android:textSize="30sp"/>

附上自定义的图片：

shape_card_back_bg.xml

shape_card_front_bg.xml

主要的逻辑如下：

package com.jackie.flipanimationdemo;

import android.animation.Animator;

import android.animation.AnimatorInflater;

import android.animation.AnimatorListenerAdapter;

import android.animation.AnimatorSet;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.FrameLayout;

import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private FrameLayout mCardMainContainer;

private LinearLayout mCardFontContainer,mCardBackContainer;

private AnimatorSet mRightOutAnimatorSet,mLeftInAnimatorSet;

private boolean mIsShowBack = false; //是否显示背面

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

initEvent();

}

private void initView() {

mCardMainContainer = (FrameLayout) findViewById(R.id.card_main_container);

mCardFontContainer = (LinearLayout) findViewById(R.id.card_font_container);

mCardBackContainer = (LinearLayout) findViewById(R.id.card_back_container);

setAnimators(); // 设置动画

setCameraDistance(); // 设置镜头距离

}

private void initEvent() {

mCardMainContainer.setOnClickListener(this);

}

private void setAnimators() {

mRightOutAnimatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.anim_right_out);

mLeftInAnimatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.anim_left_in);

// 设置点击事件

mRightOutAnimatorSet.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationStart(Animator animation) {

super.onAnimationStart(animation);

mCardMainContainer.setClickable(false);

}

});

mLeftInAnimatorSet.addListener(new AnimatorListenerAdapter() {

@Override

public void onAnimationEnd(Animator animation) {

super.onAnimationEnd(animation);

mCardMainContainer.setClickable(true);

}

});

}

private void setCameraDistance() {

int distance = 16000;

float scale = getResources().getDisplayMetrics().density * distance;

mCardFontContainer.setCameraDistance(scale);

mCardBackContainer.setCameraDistance(scale);

}

private void flipCard() {

if (!mIsShowBack) { // 正面朝上

mRightOutAnimatorSet.setTarget(mCardFontContainer);

mLeftInAnimatorSet.setTarget(mCardBackContainer);

mRightOutAnimatorSet.start();

mLeftInAnimatorSet.start();

mIsShowBack = true;

} else { // 背面朝上

mRightOutAnimatorSet.setTarget(mCardBackContainer);

mLeftInAnimatorSet.setTarget(mCardFontContainer);

mRightOutAnimatorSet.start();

mLeftInAnimatorSet.start();

mIsShowBack = false;

}

}

@Override

public void onClick(View v) {

switch (v.getId()) {

case R.id.card_main_container:

flipCard();

break;

}

}

}

用到一些动画的资源：

anim_left_in.xml

android:duration="0"

android:propertyName="alpha"

android:valueFrom="1.0"

android:valueTo="0.0"/>

android:duration="@integer/anim_length"

android:propertyName="rotationY"

android:valueFrom="-180"

android:valueTo="0"/>

android:duration="0"

android:propertyName="alpha"

android:startOffset="@integer/anim_half_length"

android:valueFrom="0.0"

android:valueTo="1.0"/>

anim_right_out.xml

android:duration="@integer/anim_length"

android:propertyName="rotationY"

android:valueFrom="0"

android:valueTo="180"/>

android:duration="0"

android:propertyName="alpha"

android:startOffset="@integer/anim_half_length"

android:valueFrom="1.0"

android:valueTo="0.0"/>

用到了属性动画，为了兼容性，别忘了如下配置：

效果图如下：

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是编程之家为你收集整理的Android实现卡片翻转动画全部内容，希望文章能够帮你解决Android实现卡片翻转动画所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！