您的位置:首页 > 移动开发 > Android开发

Android studio 实现图片旋转效果

2017-02-09 14:52 197 查看
这个图片翻转效果有些类似于支付宝五福翻转的效果,或者是游戏中的翻拍效果先附上效果图



第一步是两个正面反面的布局很简单就是一个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;

}
}

}


希望对你有帮助

项目地址:http://download.csdn.net/detail/liufatao/9750898
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: