动起来-几个Android常用动效

生活不能没有运动,so让我们动起来吧^^~

下面分享几个简单、常用、不易出错的动效。

要点

  • 文字滚动。
  • 视图自带的动画。
  • 抛物位移。
  • 按压水面波纹效果。
  • 共享元素动画。

Demo

Fly (点击查看)

一如既往的霍尔首页^^:

fly.gif

要点讲解

  • 文字滚动: 把下面这段代码放入Layout即可。
<TextView    
android:layout_width="match_parent"    
android:layout_height="wrap_content"    
android:ellipsize="marquee"    
android:focusable="true"    
android:focusableInTouchMode="true"    
android:marqueeRepeatLimit="marquee_forever"    
android:padding="@dimen/text_margin"    
android:scrollHorizontally="true"    
android:singleLine="true"    
android:text="滚动的 TextView ^ ^    
abcdefghijklmnopqrstuvwxyz    1234567890    
one two three four five six seven eight nine ten    "/>
  • 使用View自带动画: 下面这段代码,如果hasShowingAnimation,那么将mSelfAnimationTv复原,否则将mSelfAnimationTv顺时针转90度、透明度渐变为0.5、下移300像素、放大1.3倍。
boolean hasShowingAnimation;
/*View 自身动画*/
private void showSelfAnimation() {
    if (hasShowingAnimation)
        mSelfAnimationTv.animate()
                .rotation(0)
                .alpha(1f)
                .translationY(0)
                .scaleX(1f)
                .scaleY(1f);
    else
        mSelfAnimationTv.animate()
                .rotation(90)
                .alpha(0.5f)
                .translationY(300)
                .scaleX(1.3f)
                .scaleY(1.3f);
    hasShowingAnimation = !hasShowingAnimation;
}
  • 抛物位移: 请看源码
  • 按压水面波纹效果: 非常简单,在res-drawable文件夹添加一个bg_btn.xml文件,代码如下,然后将其作为Button、TextView等可点击控件的背景即可。
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#dfa">
    <item>
        <selector>
            <item
                android:drawable="@android:color/transparent"
                android:state_pressed="true">
            </item>
            <item android:drawable="@android:color/white"/>
        </selector>
    </item>
</ripple>
  • 共享元素动画 查看源码 要点请看源码,实现起来很简单、很神奇,关键是这个方法ActivityOptionsCompat.makeSceneTransitionAnimation()。 使用该Transition需要注意如下几点: 1.转场两边的控件内容需一致(比如图片文字需相同); 2.如果图片通过网络加载,请保证图片加载库一致,另外使用Fresco加载图片会有点问题,这里有解决方案(但是我没能看懂,所以我又compile了Picasso)。

相关

本文Demo: https://github.com/XunMengWinter/Fly Material Design初露锋芒: http://www.jianshu.com/p/e64a4e08f57a

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏娱乐心理测试

Ios常用第三方框架(一)

2863
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

9976
来自专栏前端说吧

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

3565
来自专栏软件

那些前端常用的网站插件

这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

2925
来自专栏Nian糕的私人厨房

JavaScript 鼠标悬停图片,显示隐藏文本

当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

1374
来自专栏進无尽的文章

兼容 - 纯代码完美适配 iPhoneX

本文主要针对适配 iPhoneX列出一些关键点,仔细阅读可完美适配 iPhoneX,其中还有一些是适配 iOS11的, 话不多少,开始正餐。

1.4K2
来自专栏拂晓风起

cocos2d-js 粒子系统使用自定义图片,还原原来的图片宽高

941
来自专栏非著名程序员

Android弹软键盘时之ListView的变化控制

前几天有个人问我,说在最底下有个输入框,弹出键盘时整个界面都一起跟着移动,上面的标题栏都移到上面看不到了,界面非常难看。其实这种问题一般存在于这样的界面布局中那...

1887
来自专栏前端真相

HTML

2218
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

2958

扫码关注云+社区

领取腾讯云代金券