妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 8527|回复: 8

[特效类] 坚果手机动画效果的视频教程、以及音乐律动版demo演示

  [复制链接]
leo 发表于 2015-9-16 15:37:35 | 显示全部楼层 |阅读模式


最近有一部手机非常火爆:坚果手机,自推出以来,凭借其强悍的性价比和出众的设计,再配合着流畅得不像安卓机的系统,几乎横扫一切千元机市场……

1.jpg
2.jpg

3.jpg

8.jpg

9.jpg

10.jpg

注:图片来自坚果手机用户:http://weibo.com/yiduanlu#_rnd1442386053543
http://weibo.com/itimesad


自它推出后,妙味团队小伙伴们和妙味的众多学员们,疯狂购买的亦不在少数,几乎每隔两三天,就有坚果手机寄到妙味课堂。大家兴高采烈的相互把玩、互相欣赏……

4.jpg

5.jpg

6.jpg

注:图片来自坚果手机用户:
http://weibo.com/shejipi

与此同时,带动了许多人跑去看坚果手机的官网,也就是那个简单到令人发指的网址:t.tt
打开坚果手机介绍主页,映入眼帘的效果,就是这样一幅画面:


7.png


这个网页的交互效果很好玩儿,当鼠标滑入时,这七部彩色手机随着鼠标的远近而上下跳跃,动画轻柔而优雅。就连坚果官方的员工和他们的朋友们,也被这效果迷住了,玩个不亦乐乎:

视频地址:http://video.weibo.com/show?fid= ... bc31c457d65b3d13a8f



注:视频来自坚果手机用户:http://v.youku.com/v_show/id_XMT ... =s1.8-1-1.2#paction


于是许多还没有学到JS中级课程的学员就会问:这个效果究竟怎么实现的啊?好想知道实现原理……问的人多了,讲师难免重复解答,慢慢的,解答变成了一种体力活儿。


其实妙味课程后面有相关知识点的讲解,不过为了缓解大家浓郁的好奇心,我们就安排了 JS课程讲师王允,为大家录制了这个效果的视频教程。




  1. 1.图片位移的原理

  2.         html结构和css样式介绍
  3.         分析图片位移的原理

  4. 2.鼠标移入计算比例

  5.         计算每张图width占可视区的百分比
  6.         得到每张图中心点X轴的距离
  7.         设置图片样式translate3d中Y轴的偏移量

  8. 3. 使用requestAnimationFrame做动画

  9.         使用requestAnimationFrame做动画
  10.         调用getBoundingClientRect方法得到元素到屏幕上方的距离

  11. 4. 计算缓冲运动的值

  12.         缓冲运动的值 = (目标位置-当前所处位置)/摩擦系数
  13.         在执行函数中调用requestAnimationFrame
  14.         removeAttribute("style")回到初始位置

  15. 5. 点击查看图片细节

  16.         利用transform :scale()放大元素
  17.         图片设置transition
  18.         图片添加class,使其对齐

  19. 6. 图片放大居中显示

  20.         设置translate3d()中X轴的偏移量
  21.         设置开关,点击交替放大缩小
复制代码
11.png
视频地址:http://pan.baidu.com/s/1i3u9Bc5
密码:j77n






另外,在实现了鼠标滑动效果后,又有人想制作那种真正随着音乐旋律摆动的动画效果。于是,妙味研发部的小伙伴:宋承龙  同学就抽空做了一个简易的 demo,对原效果做了一些改进。他做的界面非常简洁,不过当音乐响起来时,那些跳动的音符配合坚果手机的舞动,别有一番韵味 ^_^


13.png


在线预览:http://2013.miaov.com/student/music/
可能有人会问:源码为何不提供下载?
亲们,你们是前端,你们可以用鼠标右键在页面上查看源代码就看到了哦~~


在坚果手机市场大卖的当下、在超级强悍的Smartisan OS v2.0.0推出后的隔天,我们谨以此举致敬坚果手机、致敬锤子科技,致敬所有认真踏实做事的团队与个人,是你们带来这个世界的诸多美好,我们有幸同处一个时代,倍感骄傲!


--------------------------------------------------------------------------


妙味团队诚挚邀请你加入我们:
>>招募WEB助理讲师(8K-10K)、初级讲师(11K-13K)、中级讲师、高级讲师
>>招募运营推广专员(6K-9K)
>>招募客服妹纸(3k-5k)
>>招募前台妹纸(3k-4k)




12.png
回复

使用道具 举报

玫瑰刺伤指尖。 发表于 2015-9-16 15:53:14 | 显示全部楼层
先占位,回家再慢慢看教程与视频.
回复 支持 反对

使用道具 举报

银狐 发表于 2015-9-16 16:07:49 | 显示全部楼层
先占位,回家再慢慢看教程与视频.
回复 支持 反对

使用道具 举报

89757 发表于 2015-9-16 16:50:12 | 显示全部楼层
这个律动看着很高大上呢
回复 支持 反对

使用道具 举报

sole 发表于 2015-9-17 13:54:22 | 显示全部楼层
那个音乐的写得不错,看了源代码,貌似用的最新的API。
回复 支持 反对

使用道具 举报

sole 发表于 2015-9-17 14:11:42 | 显示全部楼层
嗯嗯,想了想,把移出class方法的实现给重写了,不知效率如何,请看代码:
  1. function removeClass(obj, sClass) { //移除class样式
  2.         var aClass = obj.className;
  3.         if (!obj.className) return;
  4.         var re = new RegExp('(\s+)?'+sClass+'(\s+)?');
  5.     if(re.test(sClass)){
  6.         aClass = aClass .replace(re, '').replace(/^\s+|\s+$/, '').replace(/\s+/, ' ');
  7.     }
  8.     obj.className = aClass;
  9. }
复制代码
回复 支持 反对

使用道具 举报

雪剑无影 发表于 2016-6-14 16:39:04 | 显示全部楼层
把这个源码下到本地测试,音乐也有,路径也对, 为什么控制台报这个错:
MediaElementAudioSource outputs zeroes due to CORS access restrictions for file:///E:/%E6%90%AC%E8%BF%81/js%E5%B0%8F%E6%95%88%E6%9E%9C/music/Remix.mp3
回复 支持 反对

使用道具 举报

我只有态度 发表于 2016-6-30 12:35:32 | 显示全部楼层
好贴,双手赞成!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-3-22 06:39 , Processed in 0.164633 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表