用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

:在小程序中用一張 PNG 實現兩個動效

巴黎彩票计划 www.hknsi.icu 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空間
收藏
原作者: 郎樂樂 來自: 掘金
排三开机号查询牛材网 排列五历史上的今天开 广东省福利彩票发行中心在哪里 黑龙江时时几点结束 有没有专业看赛车比赛的app 快3计算公式绝准法 舟山飞鱼和值走势图 加拿大pc输的家破人亡 21选五走势图 今晚特玛号65期 高频彩为什么久玩必输 黑彩3d规则及中奖规则 5元刮刮乐中奖怎么看中 二八彩pp 哪个平台有浙江十一选五 2019时时彩20分钟开一次