Android studio 实现图片旋转效果

最新推荐文章于 2024-05-15 01:31:15 发布

秀川冈坂

最新推荐文章于 2024-05-15 01:31:15 发布

阅读量7.2k

点赞数 2

分类专栏： Android 动画

本文链接：https://blog.csdn.net/liufatao/article/details/54947186

版权

Android 动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个图片翻转效果有些类似于支付宝五福翻转的效果，或者是游戏中的翻拍效果先附上效果图

第一步是两个正面反面的布局很简单就是一个ImageView和Textview组成我拿其中一个举例

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_fl_card_front"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="20sp"
        android:text="大姑娘"
        android:textColor="@android:color/white"/>
</RelativeLayout>

第二部主页布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_fl_container"
    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="fipCard"
    tools:context="com.example.administrator.cardflip.MainActivity">

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


</RelativeLayout>

第三部书写属性动画

动画出

<?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="180dp">

    </objectAnimator>

    <objectAnimator android:duration="0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:valueFrom="1.0"
        android:valueTo="0.0">

    </objectAnimator>

动画进

<?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>
    <!--旋转-->
    <objectAnimator android:duration="3000"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0"></objectAnimator>
    <!--出现-->
    <objectAnimator android:duration="0"
        android:propertyName="alpha"
        android:startOffset="1500"
        android:valueFrom="0.0"
        android:valueTo="1.0"></objectAnimator>
</set>

第四部整合代码实现效果

public class MainActivity extends AppCompatActivity {
    AnimatorSet mRightOutSet, mLeftOutSet;
    boolean mIsShowBack;
    @BindView(R.id.main_fl_card_back)
    RelativeLayout mainFlCardBack;
    @BindView(R.id.main_fl_card_front)
    RelativeLayout mainFlCardFront;
    @BindView(R.id.main_fl_container)
    RelativeLayout mainFlContainer;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        setAnimators();//设置动画
        setCameraDistance();//设置距离


    }

    //设置动画
    private void setAnimators() {
        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);
        mLeftOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);
        //设置点击事件
        mRightOutSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mainFlContainer.setClickable(false);
            }
        });

        mLeftOutSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mainFlContainer.setClickable(true);
            }
        });

    }

    //改变视角距离，贴近屏幕
    private void setCameraDistance() {
        int distance = 16000;
        float scale = getResources().getDisplayMetrics().density * distance;
        mainFlCardFront.setCameraDistance(scale);
        mainFlCardBack.setCameraDistance(scale);
    }

    //点击卡片翻转卡片
    public void fipCard(View view) {
        //正面朝上
        if (!mIsShowBack) {
            mRightOutSet.setTarget(mainFlCardBack);
            mLeftOutSet.setTarget(mainFlCardFront);
            mRightOutSet.start();
            mLeftOutSet.start();
            mIsShowBack = true;
        } else {
            mRightOutSet.setTarget(mainFlCardFront);
            mLeftOutSet.setTarget(mainFlCardBack);
            mRightOutSet.start();
            mLeftOutSet.start();
            mIsShowBack = false;


        }
    }



}