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 ...
随机推荐
- DB2 格式化输出 Date
转自:http://www.cnblogs.com/zjun/archive/2012/02/15/2353054.html 在Oracle中可以使用TO_CHAR()函数来将日期类型的数据转换成字符 ...
- Unity编辑器下,界面替换NGUI字体以及字号
项目中有需要批量替换字体以及字号的需求,一般也就是多语言处理吧. 提供界面如下: 手机拍图,就这样凑合看吧.但是代码不打折. 紧急避让,我只提供修改UILabel以及UIPopupList 下的字体, ...
- 线上服务CPU100%问题快速定位实战
功能问题,通过日志,单步调试相对比较好定位. 性能问题,例如线上服务器CPU100%,如何找到相关服务,如何定位问题代码,更考验技术人的功底. 58到家架构部,运维部,58速运技术部联合进行了一次线上 ...
- LeetCode: Validate Binary Search Tree 解题报告
Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...
- django —— Celery实现异步和定时任务
1. 环境 python==2.7 djang==1.11.2 # 1.8, 1.9, 1.10应该都没问题 celery-with-redis==3.0 # 需要用到redis作为中间人服务(Bro ...
- Java操作memcache
[本文出自天外归云的博客园] 准备工作 Java操作memcache需要spymemcache类库的支持,在Eclipse中修改maven项目的pom.xml文件—— 添加仓库: <reposi ...
- ActiveMQ入门实例(转)
转载自:http://www.cnblogs.com/xwdreamer/archive/2012/02/21/2360818.html 1.下载ActiveMQ 去官方网站下载:http://act ...
- phalcon无限重定向
问题 换了个新电脑,后来重新配置phalcon环境.由于用得是windows,而且还用得是2.0.5得版本,官网已经没提供这个版本下载了.而旧电脑已经被格式化了,
- 实践 ArcGIS Web 3D
ArcGIS 产品家族的 Web 3D 功能众多用户期待已久.从 ArcGIS 10.3.1 版本号開始,Esri 放了个大招,千呼万唤始出来的 Web 3D 功能,最终不再犹抱琵琶半遮面了. 那究竟 ...
- kafka0.10
整理kafka相关的常用命令创建主题(4个分区,2个副本)bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-f ...