用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

安徽快三走势图:在小程序中用一张 PNG 实现两个动效

北京快三最新开奖结果 www.6z8dk.cn Rolan 2019-5-20 00:41

需求:在小程序中展示一个常规动效,点击后执行一个按压动效,执行完成恢复常规动效。 可选方案: 1. 使用 gif 图 无法控制 gif 图的执行过程,需要通过切换图片源来实现两个动效的切换。 图片放在代码包中:动效的 ...

需求:在北京快三最新开奖结果中展示一个常规动效,点击后执行一个按压动效,执行完成恢复常规动效。

可选方案:

1. 使用 gif 图

无法控制 gif 图的执行过程,需要通过切换图片源来实现两个动效的切换。

图片放在代码包中:动效的 gif 图尺寸一般比较大,放在代码包中会超出代码包 2M 大小的限制。

使用网络图片:切换的时候需要加载图片,会出现动效不连贯的问题

缓存在本地:使用 wx.downloadFile 缓存在本地,但本地缓存有 10M 的限制,一不小心也会超哦~

2. 使用 APNG

问题同 gif,兼容性也有一定的问题。

3. 使用 PNG 序列(雪碧图)

单个动效的实现方案可以参考 张鑫旭大佬的文章:小tips: CSS或JS实现gif动态图片的停止与播放。

为了避免切换动效时出现短暂的空白的状态,可使用 PNG 序列的方式实现:将两个动效的序列图连接在一起。

那用一张 PNG 来做两个动效怎么实现呢?以一张 80 帧的 PNG 序列为例,前 40 帧为第一个动效,后 40 帧为第二个动效。执行时间均为2s。

@keyframes animate-default {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 50%;
  }
}

.animate-default {
    animation: animate-default steps(39) 2s infinite forwards;
}

@keyframes animate-click {
  0% {
    background-position: 50%;
  }

  100% {
    background-position: 100%;
  }
}

.animate-click {
    animation: animate-click steps(39) 2s 1 forwards;
}
复制代码

but,现实总是很残酷,并不是我们想要的效果。

那问题出在哪里呢?

单帧图片的宽度为 384px,图片执行到第 40 张的时候其实位置为 384 * 39 = 14976,我们将 animate-default 动效的 100% 位置改为 -14976px,同理将 animate-click 动效的 0% 位置改为 384 * 40 即 -15360px 即可。

但为了更好的适配不同的设备,我们选用了 rpx 为单位,虽然在 750 设备上动画正常,但切换设备,动画又坏掉了...摩擦,摩擦,在光滑的地板上...

请忽略后面的背景~

不能用 px 为单位,不能用 rpx 为单位,那以百分比的形式设置 background-position,我们该如何实现呢?

敲黑板,重点来了??!

敲黑板,重点来了??!

敲黑板,重点来了??!

background-position 的计算公式(from《CSS 世界》)是:

percentX = positionX /(容器宽度 - 图片宽度);

percentY = positionY /(容器宽度 - 图片宽度);

所以本例中,

-14976 / (384 - 384 * 80 ),约 0.49367089;

-15360 / (384 - 384 * 80),约 0.50632911。

@keyframes animate-default {
  0% {
    background-position: 0;
  }

  100% {
    background-position: 49.367%;
  }
}

.animate-default {
    animation: animate-default steps(39) 2s infinite forwards;
}

@keyframes animate-click {
  0% {
    background-position: 50.633%;
  }

  100% {
    background-position: 100%;
  }
}

.animate-click {
    animation: animate-click steps(39) 2s infinite forwards;
}
复制代码

在点击后切换 class,再切换回来~OK啦,完美。

分享至 : QQ空间
收藏
原作者: 郎乐乐 来自: 掘金
  • 机器人送快递将在西安试点 识别红绿灯还能“车让人” 2019-06-20
  • 质量提升 贵在行动 2019-06-20
  • 《关于发展租赁型职工集体宿舍的意见(试行)》正式发布实施 2019-06-19
  • Xi Menschen sind die Erschaffer der Geschichte, die wahren Helden 2019-06-19
  • 十二届全国人大常委会第八次会议 2019-06-18
  • 马克思主义通过指导无产阶级革命建立起部分社会财富公有制而改变了人类历史发展进程,离开部分社会财富公有制的建立来谈“改变人类历史发展进程”纯粹是无稽之谈。 2019-06-17
  • 中国第二大露天矿坑的第二春 2019-06-17
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-06-16
  • 中国国际时装周201819秋冬系列 2019-06-16
  • 广西一高中悬挂横幅为高考生助威 走廊堆满书本 2019-06-15
  • 社会主义是从私有制走向公有制,直至共产主义的到来。 2019-06-14
  • 【大阅兵历史图片集锦】 2019-06-13
  • 线下提前一刻钟!电影节加映场开票出福利 2019-06-13
  • “中央厨房”的扬弃与完善 2019-06-12
  • 【专题】未来之城 拥抱世界 2019-06-11
  • 702| 110| 961| 215| 800| 728| 185| 75| 715| 488|