搜索
首页web前端html教程如何学习 Android Animation?_html/css_WEB-ITnose

在 Android 开发者网站 搜索『animation』,通过『blog』过滤搜索结果,可以获得很多博文,我只摘录了前两页,并把它们分成了两类:

动画可以做成什么样子(第1类)

下述几篇博文通过如下3个方面向开发者展示『动画』:

  • 给出一些指导原则,阐述为什么要如此做动画,或者这样的动画有什么好处;

  • 给出 GIF 动图,直观地展示动画是什么;

  • 给出实现这种动画的代码片段(关键类、方法、资源文件)或者实现思路;

这非常棒,可以帮助我们很快建立动画的印象,了解某个名词代表的动画是什么样子,应该怎么去实现。而且代码片段很多是从开源项目中摘录的,意味着我们可以调试这些动画。

2014-08-05 Material design in the 2014 Google I/O app

这篇文章的作者是 Google I/O app 的主设计师,而 I/O app 的作用之一是提供 Android 设计和开发的最佳实践(it serves as a reference demo for Android design and development best practices)。文中特别提到了最喜爱的 app 细节之一就和动画有关:浮动操作按钮(floating action button)的状态根据“用户是否会出席当前页面的这个会议”而改变,状态改变时伴随着动画。文中详细地讲到了动画实现的步骤,虽未罗列代码,但可以从 github-google-io-app 获取源码,了解实现细节。

2014-10-24 Implementing Material Design in Your Android app

这篇文章一半篇幅在讲『Motion』:当用户触摸屏幕时,所有的变化应从接触点开始向外辐射,建立画面过渡时的关联和连续性,这些必须是有意义且友好的。Materials 通过这种方式向用户提供反馈,使用户注意到变化,从而帮助到用户。(to focus attention, establish spatial relationships and maintain continuity. Materials respond to touch to confirm your interaction and all changes radiate outward from your touch point. All motion is meaningful and intimate, aiding the user’s comprehension.)。分别介绍了:

  • Activity & Fragment Transitions:在两个页面间平滑过渡,常见的场景是从列表视图切换到详情视图;

  • Ripples:一种波纹效果,波纹从触点开始向外扩散直至填充整个view,点击继承自 Theme.Material 的 button 就可以看到这种效果;

  • StateListAnimator:View 状态改变时的动画;

  • Circular Reveal:一个圆形扇面从触点开始向外辐射直至填充整个view,这种过渡效果常用于展示新的内容;

  • Interpolators:插值器定义了动画改变的速率,比如允许 alpha, scale, translate, rotate 加速、减速、重复等。比如插值器 fast_out_slow_in, 加速开始、逐渐降速直至结束,这样的动画效果使得对象在整个运动轨迹中,在接近终点的位置耗费较多时间。而根据不同的场景,选择不同的插值器或者自定义插值器,就可以使动画更具意义,摆脱千篇一律的印象。

2015-05-28 Announcing the Material Design Showcase and Awards

这篇文章先回顾了14年6月首次公布 material design 时的愿景『a single design system that can work across platforms and brands』。但这些愿景和 material design 的设计思想全是通过『假想中的 App』 来演示的。然后转眼到了15年5月,也就是这篇文章发布的日期,世界已经发生了变化,很多 App 接受并通过 Android 5.0 SDK 和 AppCompat 实现了material design。

因此特别收集了 18 个符合 material design 的 app 向众人展示,其中 6 个 app 由于在 material design 某一方面做的特别出色而被授予了第一届 Material Design Awards. 因动画效果而获奖的是 Tumblr: Delightful Animation.
动画效果可以做成什么样子,官方告诉你去看看 Tumblr.

2015-06-16 More Material Design with Topeka for Android

这篇文章是开源 Android App 项目 Topeka for Android 的说明文档,用来演示 material design 的设计原则,帮助开发者在不同的平台上建立统一的用户体验。(原文:It demonstrates that the same branding and material design principles can be used to create a consistent experience across platforms.)

Topeka 是一个趣味问答应用,包含9个种类的问题,以网格布局呈现,点击某个格子进入回答问题的页面,一个问题回答完后就切换到下一个问题,有选择题填空题等各种类型的问题(对应各种UI组件)。包含了很多动画元素:

  • Transitions: 很棒的 Activities 转场动画(great transitions between Activities);

  • Animations: 答题时有精心编排的动画,一旦答题就弹出一个浮动操作按钮,点击按钮提交答案就进入了下一个问题,这时会根据回答正确与否播放对应的动画;

  • Property Animations:为 circular reveal 增加颜色渐变的动画(从FAB的颜色变成透明)以营造出消融的效果(Adding a color animation from the FAB's color to transparent creates a dissolve like effect to the circular reveal)。
    (上上一个gif包含这种效果,但太快了看不出效果,下面这个gif延长了时间,为了突出动画)

概述动画相关的类和接口(第2类)

2011-05-30 Introducing ViewPropertyAnimator
2011-02-24 Animation in Honeycomb
2011-11-01 Android 4.0 Graphics and Animations

前两篇文章先讨论了一个问题,已经有了能实现 move, scale, rotate, and fade 这些视图动画的 android.view.animation ,为什么还要在 3.0 新引入的 APIs?带来了哪些新特性?然后进一步展示了这些新特性的强大便利之处。第三篇文章讨论了 4.0 在 3.0 核心特性基础上增加的一小点儿改善。(These articles discuss the new APIs added in 3.0 that make animation in Android easier, more powerful, and more flexible. The Android 4.0 improvements discussed below are small additions to these core facilities.)

这几文章排在搜索结果的前几位,可见其重要程度,作者是 Chet Haase,一个致力于图形和动画研究的 Android 开发者,可以从他的 个人博客graphics-geek.blogspot.com 阅读更多相关主题的博文。

需要说明的是 HONEYCOMB 3.0( about versions android-3.0 highlights ) 发布于 2011.02,引入了New animation framework;3.1 发布于 2011.05;ICE_CREAM_SANDWICH 4.0 发布于 2011.11。而这几篇博文的发布时间与相应的系统版本发布时间一致,而且其中两篇文章在 Android API Guides: Animation and Graphics 页面有推荐,所以真的应该多关注和学习官方开发者的文章

2015-04-21 Android Support Library 22.1
这篇文章介绍了 Android support library 22.1 版本带来的新特性。与动画有关的内容是:Lollipop android.R.interpolator 新增的几个 Interpolators 已经在 Support V4 得到支持。

通读完上述几篇文章后,我们就能够了解到『动画可以做成什么样子』、『实现这些动画的类和接口,及技术的演变历史』。是不是有种高屋建瓴、运筹帷幄的感觉?我的感觉是,不至于淹没于 Android 文档的海洋中,被巨多的技术细节打的晕头转向。而且我觉得学习 demo 时在精不在多,所以应该先从官方的 sample 以及上述官方文章中的 demo 入手,同时查阅 API guides:

Android Training & Guides

Android 开发者网站提供的 Training:
Animating Views Using Scenes and Transitions
Adding Animations
Defining Custom Animations

Android 开发者网站提供的 API Guides:
Animation and Graphics Overview

有很多途径获取官方 sample:Welcome to code samples for Android developers,比如直接在 Android Studio 中导入:

学习路线图

非官方的博文也有很棒的,比如下面这一篇:
Exploring Meaningful Motion on Android ,这是译文 探索安卓中有意义的动画 ,这是文章对应的开源项目 hitherejoe/animate ,1280颗星。
类似的一个开源项目 lgvalle/Material-Animations,3840颗星。

但如果需要系统地学习某块知识点,从第一手和权威的角度讲,官网及其博客是开发者的不二选择。不要介意在阅读英文文档上花费的时间,这些都是值得的。看不懂的再查阅相关文章相佐证。

所以我花了大概三天时间,整理出这篇文章,制定了我的学习路线图:

  • 通读官方 blog(上述列出的);

  • 学习官方 training(上述列出的);

  • 学习 GitHub 高星(感兴趣的)项目(好多人推荐了好多非常好的项目);

  • 阅读其它高质量的 blog 查缺补漏(善用 google);

  • Go! Go! Go! li21 SH 2016-01-16 ~ 2016-01-23

    声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

    HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

    HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

    htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

    HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

    HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

    HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

    HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

    HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

    HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

    HTML中起始标签的示例是什么?HTML中起始标签的示例是什么?Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?Apr 05, 2025 pm 01:24 PM

    如何设计菜单中的虚线分割效果?在设计菜单时,菜名和价格的左右对齐通常不难实现,但中间的虚线或点如何...

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最佳图形设置
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.如果您听不到任何人,如何修复音频
    3 周前By尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25:如何解锁Myrise中的所有内容
    4 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    MinGW - 适用于 Windows 的极简 GNU

    MinGW - 适用于 Windows 的极简 GNU

    这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

    EditPlus 中文破解版

    EditPlus 中文破解版

    体积小,语法高亮,不支持代码提示功能

    SublimeText3 Linux新版

    SublimeText3 Linux新版

    SublimeText3 Linux最新版