APP设计中的交互动画是怎么实现的？

Posted 2023-04-16

交互动画是指在动画作品播放时支持事件响应和交互功能的一种动画，也就是说，动画播放时可以接受某种控制。这种控制可以是动画播放者的某种操作，也可以是在动画制作时预先准备的操作。这种交互性提供了观众参与和控制动画播放内容的手段，使观众由被动接受变为主动选择。最典型的交互式动画就是FLASH动画。观看者可以用鼠标或键盘对动画的播放进行控制。Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种，通过特定的程序可以修改里面的数据。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。在出到Flash 8以后， Macromedia又被Adobe公司收购。Flash通常也指 Macromedia
Flash Player(现Adobe FlashPlayer)。其它辅助工具：photoshop,flex, illustrator等。序列帧如果过多过大容易照成一瞬间的加载卡顿现象，十分影响用户体验；序列帧过多会影响应用的包体大小，而许多渠道对包体大小都是有或多或少限制的。总结：如果仅仅是一些元素的位移，缩放，旋转，淡入淡出这类简单的动画，强烈建议由美术提供基础元素，程序实现具体动画。至于其它类型的动画就得视情况而定了。

参考技术A

h5前端就是html5开发的前端交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。我们使用javascript技术以及jQuery库和Ajax控制页面的交互行为、动画效果等，使网站更具友好性和亲和力，跟踪产品的体验效果数据，关注用户，持续改善产品的用户体验。div+css:是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。

参考技术B

交互动画看上去不怎么相关的回答(其实很有关联):交互工作的边界或者说界限，在程序员和GUI设计之间淡化, GUI端:目前有很多可以使用的工具来完成交互动画比如:framer以及Origami,学习成本比较低,程序员端:动画库更是很多现成,(上面的那些工具也是开发出来的)工作划分:但是如果展示为主的话,我建议GUI去做,否则程序员去做(程序员其实不建议去处理视觉上的问题).从的发展上看:建议进一步学习更高级的工具,手中握有更高级的工具,你的创作将拥有更多的自由度。

前端 学习思路

 

1. 做一个个人网站，或者团队或者小组做一些介绍页面。 怎么做？搜索发现要学习：HTML、CSS。
2. 发现一个网站设计的好漂亮，交互真赞，动画效果真好。我想在我自己网站上也放上，可是我看不懂它的代码？搜索发现要学习：交互视觉、CSS3 动画等。
3. 他们网站上都有那种点击弹出浮层的功能，还有一些其他的更复杂的交互效果。怎么实现的？学习 JavaScript。
4. 有小学同学说我的个人网站错位了，问了下他用的是 IE7 访问的，怎么办？搜索了解一些浏览器兼容性问题、学习使用 jQuery。
5. 我想在微信朋友圈分享一下我的网站，结果缩放的好小，而且有错位。怎么解决这个问题？搜索发现要学习 响应式相关。
6. 分享了之后，发现打开速度好慢啊，要等十几秒才能打开。怎么办？学一下前端性能优化相关。
7. 网站交互功能和效果越来越多，写的 JS 和 CSS 代码越来越多，感觉写起来好慢，出了 bug 很难定位问题。怎么办？搜索发现要学习：Emmet、Less、SCSS 等辅助工具用法，JS 模块化 require.js、sea.js 以及对应的 AMD、CMD 以及 CommonJS 模块化规范等。
8. JS 更复杂了，而且要与其他同学合作开发。发现需要学习一些前端框架来提高开发效率，比如 React、Angular、Vue，此外还需要一些打包构建工具，将 JS 编译之后发布使用。需要学习 Webpack、Grunt、Gulp 等工具用法。
9. 网页和应用是开发好了，可是是静态的，没法有数据更新，怎么办？学习前后端数据沟通，Ajax 请求、JSON 数据格式、Fetch API。当然由此延伸，最好还要了解 PHP、Java Velocity、Nodejs 这些后端的知识，还要对 HTTP 的一些状态码、请求类型等有所了解。
10. 应用部署到哪里？搜索了解：虚拟主机、域名注册、VPS、云主机、Paas、Laas、DNS 解析、在中国做网站要备案但是服务器放在国外就不需要等等。
11. 每次新创建应用，在我的服务器上都要配置一遍 PHP 环境、Nodejs 环境，有的应用对 PHP 版本要求还不同，怎么办？搜索了解虚拟化技术，Docker 帮你极好的解决这个问题。
12. 每次发布还要自己手动上传代码到服务器，而且要自己在本地打包、运行单元测试，好麻烦啊。搜索发现可以自己搭建一套持续集成系统，用 git push 代码，自动触发构建，运行单元测试，成功后自动 build 然后给你上传到服务器上面。你只需要写代码就可以了。推荐：gogs + drone + docker。