animation过渡效果
References:
http://developer.android.com/training/animation/index.html
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:animateLayoutChanges
动画效果可以微妙地提升用户体验。特别是当屏幕状态发生改变时,比如新的内容添加进来或者新的动作产生。本文将以developer的training教程Adding Animations为基础,分析Android里面的动画使用。
layout过渡动画
如果layout界面有view的简单怎加,删减,可以用addView()与removeView(), 此时可以对这个过程怎加一个动画效果。ViewGroup有一个android:animateLayoutChanges的属性可以设置,这个属性的作用就在于,当layout发生变化时是否触发过度动画效果。因此只需设置为true,就可以开启默认的过渡动画。
addBtn = (Button) findViewById(R.id.button1);
container = (LinearLayout) findViewById(R.id.container);
addBtn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
final TextView tv = new TextView(MainActivity.this);
tv.setText("new item");
container.addView(tv, 0);
tv.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
container.removeView(tv);
}
});
}
});
View的渐变
从API level 12以后基类Veiw增加了animate(),可以返回一个ViewPropertyAnimator实例,作用是用来控制view本身的动画属性。
API level 12指的是Android 3.1.X以上,也就是所2.X是不支持的。
这个ViewPropertyAnimator 的接口非常多,基本的如透明度alpha,动画时长duration,坐标,渐变方式,动画结束时的回调借口等等,training重的案例使用到了alpha属性,使得进度条和显示内容的切换有一淡入淡出的效果。
mContentView.setAlpha(0f);
mContentView.setVisibility(View.VISIBLE); // Animate the content view to 100% opacity, and clear any animation
// listener set on the view.
mContentView.animate()
.alpha(1f)
.setDuration(mShortAnimationDuration)
.setListener(null); // Animate the loading view to 0% opacity. After the animation ends,
// set its visibility to GONE as an optimization step (it won't
// participate in layout passes, etc.)
mHideView.animate()
.alpha(0f)
.setDuration(mShortAnimationDuration)
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mHideView.setVisibility(View.GONE);
}
});
滑动屏幕动画
这个就是Viewpager的效果,在上下也滑动之间有一个动画效果,平时使用viewpager是一般不设置,实际上也可以通过实现自己的ViewPager.PageTransformer 来做出完全不同的切换动画效果。官方给出的缩放效果和深度效果的ViewPager.PageTransformer与默认的效果很不同。
自己实现动画关键是理解transformPage(View page, float position)的参数并实现他。page当然值得就是滑动中德那个view,position这里是float,不是平时理解的int位置信息,而是当前滑动状态的一个表示,比如当滑动到正全屏时,position是0,而向左滑动,使得右边刚好有一部被进入屏幕时,position是1,如果前一夜和下一页基本各在屏幕占一半时,前一页的position是-0.5,后一页的posiotn是0.5,所以根据position的值我们就可以自行设置需要的alpha,x/y信息。
Zoom-out page transformer
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static float MIN_SCALE = 0.85f;
private static float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
Depth page transformer
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
animation过渡效果的更多相关文章
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3的过渡效果(transition)与动画(animation)
1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transitio ...
- 谈谈iOS Animation
零.前言 这里没有太多的代码细节,只是探索iOS动画的基本概念,以及其抽象模型,数学基础等.我们学习一个知识的时候一般有两个部分,抽象部分和形象部分,抽象好比语言的语法,是规则,形象好比具体的句子,可 ...
- css3 transition animation nick
时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...
- 深入理解CSS动画animation
× 目录 [1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话 transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的:而animation则是通过关键帧 ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- vue.js之过渡效果-css
概述 vuejs的过渡效果可以让我们的页面元素在出现和消失时实现过渡.官方文档这样描述过渡效果的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Anima ...
- Xamarin.Android之给我们的应用加点过渡效果
零.前言 试想一下,我们的应用正在请求一些数据,假设网络不是很好,要花比较长的时间等待,这个时候界面什么反应也没有, 一动不动,用户可能就会认为应用挂掉了,这么久都没反应的,说不定下一分钟用户就把它卸 ...
- 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果)
[源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...
随机推荐
- 我的Eclipse设置
1.默认编码改成:UTF-8(在老项目里设置此项可能导致java源码文件注释显示乱码!可以手工输入GBK三个字母,然后点apply) 2.文件默认打开方式 3.背景颜色(#C0C0C0,RGB(192 ...
- 正确安全清空在线慢查询日志slow log的流程
查看慢查询日志的状态: mysql> show variables like '%slow%'; +---------------------+------------------------- ...
- socket.io笔记二之事件监听回调函数接收一个客户端的回调函数
//服务端 socket.on('test', function (name, fn) { console.log(name) //输出yes fn('woot'); }); //客户端 socket ...
- Android Dialog-Dialog无法充满横屏且下方有间隔
自定义一个Dialog,写完布局后运行,发现Dialog无法充满屏幕,就像下边这样: 代码大致如下: Dialog dialog = new Dialog(this); dialog.requestW ...
- 解决jar格式文件,双击不能直接运行问题
前提: 安装了JDK 步骤: 1.先右击jar文件,打开方式->选择默认程序->浏览,选中jre下bin文件中javaw.exe(比如我的javaw.exe在C:\Program Fil ...
- [转] lua 获取本地当月天数
亲测,无误. 原文传送门:lua 获取本地当月天数 开发中有用到,记录一下. local year,month = os.date("%Y", os.time()), os.dat ...
- sql2005分页储存过程和C#分页类
1.sql2005分页储存过程 --sql2005,qq524365501 create Procedure up_page2005 ), -- 表名称 ), -- 列 ), -- 主键,用于统计总数 ...
- FFmpeg Basic学习笔记(4)
图像处理 常见的图片格式包括YUV.BMP.JPG.GIF.PNG. 图像的创建 可以使用下面命令从输入源中截取图像 ffmpeg -i input -ss t image.type 从videocl ...
- Beginning SDL 2.0(3) SDL介绍及BMP渲染
SDL是一个跨平台的多媒体库.为了实现跨平台,SDL提供了一个简单的界面库抽象,比如提供了SDL_Window用于表示窗口句柄,SDL_Surface.SDL_Texture.SDL_Renderer ...
- Java获取此次请求URL以及服务器根路径的方法
http://www.jb51.net/article/71693.htm ********************************************** 本文介绍了Java获取此次请求 ...