android 属性翻牌动画,android scale实现翻牌动画效果
简单流程:
这个翻牌其实并不是立体那种翻转,而是通过收缩和伸展来完成的。
有两张图片,一张为背面:
一张为正面:
以扑克牌本身的中心点为轴,两边像中心收缩;
当背面收缩到完全没有后,通过对动画的监听器(AnimationListener)把牌换成正面,在通过伸展动画效果到完全展开。所有动画完成后就形成了一个完整的翻牌动画效果。
我在做这个的时候,在网上也找过多个动画在一起的例子,但是我发现他们都是互相copy的,没有真正自己仔细研究过的,如果我不是自己研究了一下,也不知道其中的种种。
我先把我完成的放上来,在这个过程中遇到的问题和经验在最后写。
布局文件中,我只放入了一个ImageView控件,用来显示图片的。
main.xml:
Xml代码
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:id="@+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200px"
android:src="@drawable/back"
/>
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:id="@+id/imgView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200px"
android:src="@drawable/back"
/>
这个xml我想不用我过多解释了。
Activit01.java:
Java代码
publicclassActivity01extendsActivity {
/** Called when the activity is first created. */
privateImageView imgView;
//声明一个boolean用来切换背面和正面
privatebooleanbool =false;
@Override
publicvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imgView = (ImageView) findViewById(R.id.imgView);
//给ImageView添加点击事件
imgView.setOnClickListener(newImgViewListener());
}
classImgViewListenerimplementsOnClickListener {
@Override
publicvoidonClick(View v) {
// TODO Auto-generated method stub
/*也可通过代码来实现 这个是收缩效果
AnimationSet animation = new AnimationSet(true);
ScaleAnimation scale = new ScaleAnimation(1, 0f, 1, 1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animation.addAnimation(scale);
animation.setDuration(150);
*/
//通过AnimationUtils得到动画配置文件(/res/anim/back_scale.xml)
Animation animation = AnimationUtils.loadAnimation(Activity01.this, R.anim.back_scale);
animation.setAnimationListener(newAnimation.AnimationListener() {
@Override
publicvoidonAnimationStart(Animation animation) {
}
@Override
publicvoidonAnimationRepeat(Animation animation) {
}
@Override
publicvoidonAnimationEnd(Animation animation) {
if(bool){
imgView.setImageResource(R.drawable.back);
bool =false;
}else{
imgView.setImageResource(R.drawable.front);
bool =true;
}
//通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView
imgView.startAnimation(AnimationUtils.loadAnimation(Activity01.this, R.anim.front_scale));
}
});
imgView.startAnimation(animation);
}
}
}
public class Activity01 extends Activity {
/** Called when the activity is first created. */
private ImageView imgView;
//声明一个boolean用来切换背面和正面
private boolean bool = false;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
imgView = (ImageView) findViewById(R.id.imgView);
//给ImageView添加点击事件
imgView.setOnClickListener(new ImgViewListener());
}
class ImgViewListener implements OnClickListener {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
/*也可通过代码来实现 这个是收缩效果
AnimationSet animation = new AnimationSet(true);
ScaleAnimation scale = new ScaleAnimation(1, 0f, 1, 1f,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
animation.addAnimation(scale);
animation.setDuration(150);
*/
//通过AnimationUtils得到动画配置文件(/res/anim/back_scale.xml)
Animation animation = AnimationUtils.loadAnimation(Activity01.this, R.anim.back_scale);
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if(bool){
imgView.setImageResource(R.drawable.back);
bool = false;
}else {
imgView.setImageResource(R.drawable.front);
bool = true;
}
//通过AnimationUtils得到动画配置文件(/res/anim/front_scale.xml),然后在把动画交给ImageView
imgView.startAnimation(AnimationUtils.loadAnimation(Activity01.this, R.anim.front_scale));
}
});
imgView.startAnimation(animation);
}
}
}
那么还需要两个实现动画的配置文件
back_scale.xml:
Xml代码
android:interpolator="@android:anim/accelerate_interpolator">
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
android:interpolator="@android:anim/accelerate_interpolator">
android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
fromXScale 起始时x坐标的尺寸,设置为1.0说明是整个图片x轴的长度
toXScale 结束时x坐标的尺寸,设置为0.0说明整个图片x轴完全收缩到无
fromYScale 起始时y坐标的尺寸,设置为1.0说明是整个图片y轴的长度
toYScale 结束时y坐标的尺寸,设置为1.0说明是在收缩时y轴的长度保持不变
那么他们的变化都是先对于某一点来变化的,因此pivotX和pivotY就是确定这个点的位置。
在一个数轴上(原点为图片的左上角,x轴和y轴的射线分别是向右和向下,我测试过):
pivotX="50%" 说明是以图片本身的一半作为x轴的坐标;
pivotY="50%" 说明是以图片本身的一半作为y轴的坐标;
所以圆心点的坐标就是(0.5x,0.5y)。(x y是原图片的长和高)
此效果就是以这个点的y轴为轴,x轴不断减小到0。
duration 是设置的动画执行时间 因为要体现出翻牌的效果 所以不能太慢 也不能一下就翻开
同样也有一个伸展的效果配置文件
front.xml:
Xml代码
android:interpolator="@android:anim/accelerate_interpolator">
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
android:interpolator="@android:anim/accelerate_interpolator">
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="150"/>
属性都和上面的同理,只不过是以圆心点为轴像两边伸展到完全展开。
到此,这个效果就算完成了。然后来说说我做的过程中的问题吧。
做之前也到网上查了,也有人做了一些多个动画的例子,不过不是我这样的。不说copy的问题,单说代码。举个例子:
alpha 淡入淡出,一个图片我想实现淡入淡出,是完全可以的。无论是用配置文件把两个配置好的alpha放在一个set中还是用代码都放在AnimationSet中都能实现。而反过来要实现淡出淡入用这样的方式就不可以。正常我们都会想,谁放在第一个就先执行,但我测试的时候发现淡出(alpha_out)和淡入(alpaha_in)无论谁先放在AnimationSet中都是先执行淡入动画。只有用Animation的AnimationListener监听器来监听它的执行,然后当淡出动画结束后在执行淡入才可以实现要求的效果。所以我上面的Activit01中为什么要用到AnimationListener来做这个动画。我不知道其他的人发现没发现这个问题。
最后我又以xml的形式又去验证了一下,把两个alpha都放入一个xml中,同样是这个问题,无论谁在上面还是先执行淡入的动画。其他的动画也一样,我都依次做了测试。
那么也就是说:在执行动画的时候,它会先去找fromX的最小值的那个动画无论是alpha的fromAlpha还是scale的fromXScale等等都一样,只要是最小的它就先执行,然后往最大的执行。
所以大家在做此类动画的时候一定要
android 属性翻牌动画,android scale实现翻牌动画效果相关推荐
- android 减速动画,Android View Animation
概述 可译为视图动画,分为 缩放动画 平移动画 渐变动画 旋转动画 Android系统中定义了一个抽象类Animation来定义这种视图动画,它的具体子类如下表: 动画名称 对应的子类 xml中标签 ...
- Android动画学习记录一(Android动画种类、补间动画和帧动画)
Android动画学习记录一(动画种类.补间动画和帧动画) 动画种类.补间动画和帧动画 Android动画学习记录一(动画种类.补间动画和帧动画) 一.动画种类 二.View动画 2.1 补间动画 补 ...
- vue 鼠标点击特效动画(css3动画),水波纹动画效果
效果展示 思路要点 通过向数组 waves push操作插入水波纹相关数据,使用 vue v-for 动态更新 waves 生成水波纹数据 水波纹使用fixed定位通过点击事件的 clientX 和 ...
- android 属性翻牌动画,Android通过动画实现翻牌效果
实现效果如下: 实现原理:准备好两张图片,一张作为正面,一张作为背面,当点击图片的正面后,正面的图片的横坐标x进行收缩,直到缩为0%,当正面图片的横坐标x收缩为0之后图片切换为作为背面图片,背面图片的 ...
- android 属性翻牌动画,Android自定义动画--卡牌翻牌动画
Android系统中自带了四种动画,但是都只是平面上的并不能实现我们很常见的翻牌动画,所以今天我们就要通过自定义动画来实现翻牌动画. 要实现翻牌动画,我们需要了解三个类,一个是matrix类,一个是c ...
- Android Property Animation属性动画:scale缩放动画(4)
Android Property Animation属性动画:scale缩放动画(4) 和之前我写的附录文章1,2,3相似,本文将接着使用Android Property Animation属性 ...
- android 翻牌动画,Android实现寻觅红桃A的翻牌游戏
有一种游戏,在我们还小的时候,会经常和小伙伴玩耍,拿出几张扑克牌,其中包含红桃A,游戏中有两种身份,洗牌者和猜测者,洗牌者通过洗牌打乱顺序,然后将所有纸牌背部朝向猜测者,由猜测者从中选择,如果抽出红桃 ...
- Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非 对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
- Android属性动画 Interpolator
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/118683683 本文出自[赵彦军的博客] 文章目录 Interpolator Ti ...
最新文章
- 微软caffe-SSD的训练和预测(windows cpu)
- xcode 7.2 怎么在Playground 中加载图片
- Lucene 全文搜索解析
- python更新数据库表的时间字段_python更新数据库中某个字段的数据(方法详解)
- activemq中怎么知道推送消息是否成功_ActiveMQ安装试用示列
- 通过url传参实现多个页面使用同一个页面,再返回本页面
- 利用Opencv在PictureControl中显示照片
- struts2上传文件
- Phoronix Test Suite 0.7.0发布Linux下的测试软件
- 烂大街的常用Linux命令、工具
- Euler 的面(Face,F)、顶(Vertex,V)、棱(Edge,E)公式
- centos+docker+jitsimeet视频服务器搭建
- 增值税常见的税务筹划方法,干货!收藏!
- 运放参数的详细解释和分析压摆率SR
- html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
- 鸿蒙core是什么,一文看懂HMS Core到底是什么
- 阿龙的学习笔记---C++ 进阶知识(博客汇总)
- 【智能驾驶】领域常见专业名称英文缩写
- H3C基础配置学习笔记1-端口配置
- 树莓派python3的opencv下载(编译失败第六步必看)