利用Camera和Matrix实现有趣的卡片效果
这篇文章主要讲解一个翻转切换内容的卡片效果,主要利用Camera和Matrix来实现,主要是为了加深对Camera和Matrix的理解,如果对Camera和Matrix不清楚地童鞋可以看我的上篇文章:Android中利用Camera与Matrix实现3D效果详解
好了,我们先看下效果吧 (效果的灵感来自:Dribbble):
项目github地址
欢迎star、fork。
实现思路:
一、主要应用Animation进行实现,创建一个继承自Animation的自定义动画,在applyTransformation()方法中进行逻辑判断。
二 、考虑到旋转180度后控件文字会是倒过来显示的,并且旋转360度后虽然文字正常显示了但效果不好,所以在applyTransformation方法中对角度进行动态的修改。
三、为了使外部可以在控件翻转过程中修改内容,在自定义的Animation中添加了监听接口,用于监听内容变化的时机。
四、外部控件调用startAnimation()方法即可使用。
具体实现
当然我们也可以用自定义控件的方式实现,但考虑到实现的复杂性和使用性,我没有选择。
知道了实现思路,那么我们开始着手开始吧:
第一步:自定义Animation,覆写initialize和applyTransformation方法
public class FlipCardAnimation extends Animation{
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
}
}
在initialize方法中初始化Camera对象。
第二步:在applyTransformation方法中实现逻辑:
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
if (degrees>90 || degrees<-90){
if (!isContentChange){
if(listener!=null){
listener.contentChange();
}
isContentChange = true;
}
if (degrees>0) {
degrees = 270 + degrees - 90;
}else if (degrees<0){
degrees = -270+(degrees+90);
}
}
camera.rotateX(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
在这里需要注意的地方是,当卡片顺时针或者逆时针旋转的时候对角度进行判断,当旋转大于90度或者小于-90度时,将之后的角度调整为270度到360度或者-270度到-360度之间,以此来实现卡片内容正常显示,如果不做处理,我们翻转过后的文字是倒过来显示的。
第三步:设置内容变化监听,方便外部对卡片内容做修改
private OnContentChangeListener listener;
public void setOnContentChangeListener(OnContentChangeListener listener) {
this.listener = listener;
}
public interface OnContentChangeListener{
void contentChange();
}
为了确保外部每次开启动画内容都会变动,务必在开始之前调用方法setCanContentChange():
animation.setCanContentChange();
如果设置循环动画,则要在监听中设置setCanContentChange()方法:
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
((FlipCardAnimation)animation).setCanContentChange();
}
});
第四步:为控件设置并开启动画
这一步就比较简单了,都是常用的对Animation的设置:
animation = new FlipCardAnimation(0, degree, width, height);
animation.setInterpolator(new AnticipateOvershootInterpolator());
animation.setDuration(3000);
animation.setFillAfter(false);
animation.setRepeatCount(-1);//设置无限循环
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
((FlipCardAnimation)animation).setCanContentChange();//如果设置循环,务必在这里添加这行代码
}
});
animation.setOnContentChangeListener(new FlipCardAnimation.OnContentChangeListener() {
@Override
public void contentChange() {
if (iv_pro == null) {
return;
}
iv_pro.setBackgroundResource(DRAWABLE[num]);
tv_item.setText("¥" + new Random().nextInt(500));
tv_price_item.setText("Discount");
}
});
llyt_item.startAnimation(animation);
到此,其实我们的翻转卡片效果就已经差不多完成了。在设置Animation的时候有setInterpolator()这个方法,interpolator插补器可以用来设置动画运动时的速率,插补器的原理就是通过改变实际执行动画的时间点,提前/延迟执行默认的时间点来达到加速/减速的效果。这里再多说下Interpolator的几个子类,也是为了自己以后记忆和查找,大家可以设置不同的插补器看下效果。
AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢,在中间的时侯加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 动画开始的地方快然后慢
LinearInterpolator 在动画的以均匀的速率改变
AnticipateInterpolator 向前插补器,开始的时候向后然后向前甩
AnticipateOvershootInterpolator 向前向后插补器,开始的时候向后然后向前甩,结束时向前甩一定值后再返回最后的值
OvershootInterpolator 超出插补器,结束时向前甩一定值后再回到原来位置
BounceInterpolator 动画结束的时候弹起
【项目github地址:https://github.com/zhangke3016/FlipCards】如果觉得有趣欢迎star、fork。
利用Camera和Matrix实现有趣的卡片效果的更多相关文章
- Android中利用Camera与Matrix实现3D效果详解
本文行文目录: 一.Camera与Matrix初步认识 二.Camera与Matrix旋转效果拆分介绍 三.Camera与Matrix实现立体3D切换效果 [csdn地址:http://blog.cs ...
- (转)利用 SVG 和 CSS3 实现有趣的边框动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 60.自己定义View练习(五)高仿小米时钟 - 使用Camera和Matrix实现3D效果
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 本文出自:猴菇先生的博客 http://blog.csdn.net/qq_31715429/article/details/546 ...
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果
效果:利用ligerLayout.ligerAccordion实现可折叠的菜单效果 可能用到的js.css.images等,可到官网下载: 第01步:引入相应的文件 <head><l ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- 实现卡片效果【DIV+CSS3】
一.文字卡片效果 <html> <head> meta<charset="utf-8"> <title>文字卡片效果</tit ...
- WPF 有趣的动画效果
WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至 ...
- 利用 html2canvas 做个简单的诗词卡片生成器
html2canvas 简介 html2canvas 顾名思义,就是一个可以把 DOM 元素转换成图片的类库,常用于网页截图.网页截图常见的应用场景是,在意见反馈里对当前页面进行截图,方便反馈页面出现 ...
随机推荐
- bzoj3561DZY Loves Math VI
3561: DZY Loves Math VI Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 503 Solved: 333[Submit][Sta ...
- hdu 1394 线段树
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- 主席树(BZOJ2653)
考虑二分答案,设为k,将大于等于k的元素设为1,小于的设为-1,如果某一段的和>=0,说明这段的中位数>=k. 对于每组询问,二分完后查询新序列的最大子段和即可. 但是不能开n棵线段树,观 ...
- python正则表达式与Re库
正则表达式是用来简洁表达一组字符串的表达式,一行胜千言,有点类似于数列的通项公式. 在python中提供了re库(regular expression)即正则表达式库,内置于python的标准库中,导 ...
- 【OCP|052】OCP最新题库解析(052)--小麦苗解答版
[OCP|052]OCP最新题库解析(052)--小麦苗解答版 OCP最新题库解析历史连接(052):http://mp.weixin.qq.com/s/bUgn4-uciSndji_pUbLZfA ...
- sqlserver批量更新数据
update t_hr_teadept set rjkm=b.yjkmfrom t_hr_teadept a inner join t_tr_bzxx_km b on a.bzh=b.bzh wher ...
- Windows上安装scapy
1. 环境: (1) 操作系统:win7 .server2012 (2) Python版本:Python3.6-64bit (3) 依赖模块Npcap(推荐) 或WinPcap. ps:从logo ...
- Android编译安装失败解决办法
今天用AndroidStudio开发了一个手机App玩玩,但是偶然遇到一个问题,自己手机上测试得劲的很,分享给朋友做测试,但是nie,意外出现了.... 两个人都给我说个安装失败,这个就比较尴尬了,找 ...
- Missing URI template variable 'XXXX' for method parameter of type String
原因:就是spring的controller上的@RequestMapping的实参和方法里面的形参名字不一致 方法:改成一样就可. ps.还能用绑定的方法,不建议,因为太麻烦了 @RequestMa ...
- vue-router实现登录和跳转到指定页面,vue-router 传参
定义路由的时候可以配置 meta 字段: const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, childr ...