Android studio 实现图片旋转效果
2017-02-09 14:52
197 查看
这个图片翻转效果有些类似于支付宝五福翻转的效果,或者是游戏中的翻拍效果先附上效果图
第一步是两个正面反面的布局很简单就是一个ImageView和Textview组成我拿其中一个举例
第二部主页布局
第三部 书写属性动画
动画出
动画进
第四部整合代码实现效果
希望对你有帮助
项目地址:http://download.csdn.net/detail/liufatao/9750898
第一步是两个正面反面的布局很简单就是一个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
相关文章推荐
- css实现鼠标放到图片旋转效果
- Android提高篇之自定义dialog实现processDialog“正在加载”效果、使用Animation实现图片旋转
- 纯html jquery 实现加载效果(图片旋转)
- Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍
- jquery实现LED广告牌旋转系统图片切换效果代码分享
- JS实现3D图片旋转展示效果代码
- Android实现图片顺时逆时旋转及拖拽显示效果
- JS实现图片旋转动画效果封装与使用示例
- Android Studio中实现图片倒影效果
- Android中如何使用rotate实现图片不停旋转的效果与动画的停止
- 简单实现图片可控旋转效果
- Android Tween动画之RotateAnimation实现图片不停旋转效果实例介绍
- Android提高篇之自定义dialog实现processDialog“正在加载”效果、使用Animation实现图片旋转
- PHP实现图片旋转效果实例代码
- iOS transform解决连续多次旋转缩放,实现图片旋转缩放效果
- Javascript--利用向量旋转实现网页图片移动和碰撞反弹效果
- jQuery实现可以控制图片旋转角度效果(附demo源码下载)
- IE 滤镜实现图片旋转效果
- Android自定义ImageView实现图片缩放滑动,双击放大缩小,多点触控旋转,圆角矩形,圆形和仿刮刮卡效果
- [Android]ScaleViewPager--仿“想去”客户端图片展示效果--中轴旋转ViewPager动画实现