android使用html动画,android动画介绍之 自定义Animation动画_html/css_WEB-ITnose

昨天我们介绍了Animation的基本用法。小伙伴们了解的怎么样了?如果还没有了解过Animation的小伙伴可以看看这篇博客

android动画介绍--Animation 实现loading动画效果

安卓内置的四种动画虽然说可以用AnimationSet进行组合操作,但是这些组合往往在特定场合是不够用的,就像view一样,我们可以自定义动画效果。

今天要做成的效果是模仿qq的抖一抖效果,老规矩,先来看今天的效果图:

自定义动画的实现方法为 继承Animation类重写applyTransformation()方法

public class CustomAnimation extends Animation { @Override protected void applyTransformation(float interpolatedTime, Transformation t) { t.getMatrix().setTranslate((float)Math.sin(interpolatedTime*50)*20,0); super.applyTransformation(interpolatedTime, t); }}

可以看到 applyTransformation()方法有两个参数 第一个参数interpolatedTime代表一个0-1逐渐增大的float, t代表view所需要的变化,例如t.setAlpha(); t.setTranslate();顾名思义这两个方法是发生透明度变化和位移变化。

那么我们今天的目标是实现抖一抖效果,思路如下: view先向左位移,再向右位移。 坐标为 (0-n,0) --->(0+n,n),一正一负的变化,就要用到我们的三角函数了。所以这里t.setTranslate(Math.sin())。

这样基本上我们的自定义 动画就完成了,接下来在MainActivity下获取当前的布局,给他添加动画效果

public class MainActivity extends ActionBarActivity { private Button mButton; private RelativeLayout mRelativeLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mButton = (Button) findViewById(R.id.shake); mRelativeLayout = (RelativeLayout) findViewById(R.id.relativelayout); final CustomAnimation ca = new CustomAnimation(); ca.setDuration(1000); mButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mRelativeLayout.startAnimation(ca); } }); }}

这样便大功告成!如果喜欢我的博客,请点赞哦

源代码下载

版权声明:本文为博主原创文章,欢迎注明出处后转载。

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现一个圆形轨迹,可以使用CSS的transform属性来旋转元素。具体实现步骤如下: 1. 创建一个div元素,设置宽度和高度相等,且为圆形。 ``` <div class="circle"></div> .circle { width: 100px; height: 100px; border-radius: 50%; } ``` 2. 使用CSSanimation属性来定义动画,使元素绕圆心旋转。需要设置动画循环次数为无限循环,并指定动画时间和旋转方式(linear 或 ease-in-out)。 ``` .circle { animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ``` 3. 如果要实现弧形轨迹,可以使用CSS的translateX和translateY属性来移动元素的位置。设置元素的初始位置为圆心,然后在动画使用translateX和translateY属性来移动元素。 例如,要实现元素在圆形轨迹上向右上移动的效果,可以将元素的初始位置设置为圆心,然后在动画的25%处向右上移动50px,再在动画的50%处向下移动50px,最后在动画的75%处向左下移动50px。 ``` .circle { animation: arc 5s ease-in-out infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes arc { 0% { transform: translate(-50%, -50%) rotate(0deg); } 25% { transform: translate(-50px, -50px) rotate(90deg); } 50% { transform: translate(-50px, 50px) rotate(180deg); } 75% { transform: translate(50px, 50px) rotate(270deg); } 100% { transform: translate(50px, -50px) rotate(360deg); } } ``` 通过类似的方式,可以实现元素在圆形轨迹上任意方向移动的效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值