属性动画实现翻滚的控件

控件的3d翻滚动画,即让控件沿着自己的一边进行3d的翻转,例如一个button控件沿着自己的一边翻转180度,此时显示的是自己的背面。

普通动画的效果都是在平面上,因此想到了使用属性动画中 控制rotation属性,实现3d旋转,但是发现属性动画的旋转都是以自己中心为轴的自转,而我们要得效果是以外部参照的“公转”,因此想到了在控件自转的时候添加一个同步的位移效果,这样整体效果看起来像是控件在绕侧边旋转一样。有关属性动画的一些基本知识可以查找论坛上一些大神的博客,讲的很详细,3d翻转的主要逻辑如下(以向下翻转360度为例):

<pre name="code" class="java"><pre name="code" class="java">	public void flipDown(final View v, float start, float end) {
		final int height = v.getMeasuredHeight();
		ObjectAnimator anim = ObjectAnimator
				.ofFloat(v, "rotationX", start, end);// 主动画为一个旋转动画,控制rotationX属性
		anim.addUpdateListener(new AnimatorUpdateListener() {// 为该动画添加一个动画更新监听器

			@Override
			public void onAnimationUpdate(ValueAnimator a) {
				float f = Float.parseFloat(a.getAnimatedValue().toString());// 动画变量的值获取是一个0~360的角度值
				Log.i("info", "value:" + (int) f);
				int n = (int) (f / 180);
				double cons = Math.cos(Math.toRadians(f - n * 180));
				float transY = (float) ((1 + -cons) * height) / 2 + n * height;// 主要的算法步骤
				v.setTranslationY(transY);
			}
		});
		anim.setInterpolator(new OvershootInterpolator());// 可以添加一个interpolator,这个可以看做是决定数值变化快慢的一个函数
		anim.setDuration(1000).start();
	}

其他方向的翻转可以类推之,不过这种实现有一点瑕疵,控件的3d旋转是以自身为轴,所以控件旋转的时候在z轴的正负方向各有一半,所以在翻转的时候会有一点的不协调,所以我加了一个overshoot的效果使得整体的翻转跟自然。


				
时间: 2024-10-19 20:59:04

属性动画实现翻滚的控件的相关文章

NiftyDialogEffects:集成了多种动画效果的Dialog控件

在这个网站上有很多用js实现的对话框效果:http://tympanus.net/Development/ModalWindowEffects/ 现在有人做出了相同效果的android版本,几乎和上面的一模一样,界面如下: 动画效果: 要查看更多的动画效果请参考上面给出的网站链接. 该项目的git地址为:https://github.com/sd6352051/NiftyDialogEffects 可能该项目是用android studio创建的吧,但是因为被墙的原因android studio

Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件的真实位置还是在原来动画前的那里.举个例子,如果有个Button,你给它设置了动画,让它移动到其他位置,当移动完成后,你会发现,点击Button没有任何效果,而在Button原来的位置,就是动画前的位置点击,明明没有任何控件,却看到了点击Button的效果.不知道Google为什么要这样设计.解决思

第三篇:属性_第一节:控件属性与属性的持久化

一.控件属性 首先,属性是各种.net语言的基本语法.而我们常说的控件属性是指控件类中用public修饰的属性. 见Lable的Text属性: [Bindable(true), DefaultValue(""), Localizable(true), PersistenceMode(PersistenceMode.InnerDefaultProperty), WebCategory("Appearance"), WebSysDescription("Lab

第三篇:属性_第二节:控件属性在页面及源码中的表示方式

一.属性在页面及源码中的表示方式 认真地看看页面中声明控件的代码,你会发现控件属性在页面中的表示千变万化.我们看看下面这些: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="控件属性在页面源码中的表达方式.aspx.cs" Inherits="CustomServerControlTest.控件属性在页面源码中的表达方式" %> <!DOCT

IOS 制作动画代码和 设置控件透明度

方式1: //animateWithDuration用1秒钟的时间,执行代码 [UIView animateWithDuration:1.0 animations:^{ //存放需要执行的动画代码 self.iconBtn.frame=CGRectMake(83,85,150,150); self.cover.alpha=0.0;//设置控件的透明度 } completion:^(BOOL finished) { //动画执行完毕后会自动调用这个block内部的代码 [self.cover re

bootstrap学习之利用CSS属性pointer-events禁用表单控件

参考链接: CSS3 pointer-events:none应用举例及扩展 首先pointer-events在除去SVG中的应用只有两个值:AUTO | NONE pointer-events:none 该属性可以让应用此属性的元素都会变成“真空”,比如:一个a连接上面覆盖一个div,当该div的css属性中有该属性时,该div就像不存在一样,可以直接点击到下方的a标签 这是一个很神奇的属性,Bootstrap就是利用这个属性,实现禁用控件的效果. Bootstrap中实现禁用效果有两个方法:

Android学习分享:执行某ViewGroup的动画时,子控件太多导致动画执行卡顿的问题

最近在项目中遇到一个问题,我有一个LinearLayout,里面装载了许多ImageView控件,ImageView控件显示着自己的图片,这个LinearLayout支持双指缩放,缩放采用ScaleAnimation来实现,但是但是在缩放过程中,屏幕十分卡顿,缩放效果根本没有跟上手指的缩放动作.后来在Google上查了一番,查到一个API,叫setAnimationDrawCacheEnabled(boolean enabled): /** * Enables or disables the c

窗体属性、6个简单控件

窗体属性: 布局: autoscroll:自动显示滚动条 location:窗体显示的位置(x,y) 配合startposition一起使用,startposition选用manual maximumsize:最大显示范围(宽,高) minimumsize:最小显示范围 size:窗体的实时大小 startposition:centerscreen根据桌面居中,centerparent根据父级窗体居中 windowstate:窗体开始时的状态,正常,全屏,最小化 窗口样式; controlbox

干货首发,能够清理,带动画的自己定义控件CuteEditText

转载请注明出处:王亟亟的大牛之路 总想创造个什么,可是又不知道要详细做什么. 那么仅仅有丛一直用的那些东西上面開始创造,哈哈.然后再摸索的过程中进步吧. 先上一下效果: 这样的带删除button的形式还是蛮多的吧?可是一般怎么做? 拿一个布局然后里面套一个EditText+一个Button啊或ImageView啊,然后在Activity中还要重复的FindViewByID的操作. 这些事情CuteEditText都能够完毕,并且还能依据用户输入的长度等进行推断哦. 仅仅须要一个类+动画所需的An