微信網頁開發活動（1024）

盤是一個好的習慣

1、通用函數的封裝！

2、flex在移動端的布局

2.2 、css使點擊事件失效

pointer-events:none;

3、php常用語法的熟悉情況

https://www.runoob.com/php/php-tutorial.html

變量超過8個顯示...

  <?php echo mb_strlen($userInfo['nickname'],'utf-8') > 8 ? '...':'';?>2、最多顯示8個長度名字  <?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>3、if循環格式  <?php if ($question['answer_num']=='6') {?>                    AI之星                    <?php }elseif ($question['answer_num'] >='3' && $question['answer_num'] <='5') {?>                    AI勇士                    <?php }else{?>                    AI學者                <?php }?>

最多顯示8個長度名字

<?php echo mb_substr($userInfo['nickname'],0,8,'utf-8')?>

當前的時間戳

<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >

if循環格式

<?php if ($question['num']=='6') {?>
    明星
    <?php }elseif ($question['num'] >='3' && $question['num'] <='5') {?>
    勇士
    <?php }else{?>
    學者
<?php }?>

foreach 循環

<?php if ($question_list) {?>
    <?php foreach ($question_list as $key=> $m): ?>
        <div class="swiper-slide item">
            <section class="question-box" data-id="<?=$m['id']?>">
                <div class="q-title"><?=$m['question']?>
                </div>
                <?php if ($m['answerList']) {?>
                    <?php foreach ($m['answerList'] as $answer_key=> $answer): ?>
                        <label class="radio-label">
                            <input type="radio" data-type="single_choice" name="<?=$m['id']?>" value="<?=$answer_key?>">
                            <?=$answer?>
                        </label>
                    <?php endforeach; ?>
                <?php }?>
            </section>
        </div>
    <?php endforeach; ?>
<?php }?>
  
 //例子2
  <select name="column_id" value="<?=isset($show_info['column_id']) ? $show_info['column_id'] : '0'?>">
    <?php foreach($column_tree as $key=> $col) {?>
        <option value="<?=$key?>" <?=($show_info['column_id']==$key) ? 'selected="selected"' : ''?>><?=$col?></option>
    <?php }?>
   </select>

Twig一些常用到的語法

//倒序排列
{{ loop.revindex }}
//

4、為了更好的兼容，點擊事件寫在a標簽上。

5、微信網頁開發

//微信網頁開發分享監聽
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

<script>
var param=<?=$param ?>;
    (function () {
        wx.config({
            appId: '<?=$appid ?>',
            timestamp: param.timestamp,
            nonceStr: param.noncestr,
            signature: param.signature,
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
            ]
        });
        var shareContent={
                "title": "title文案",
                "link": "<?=site_url('knowledge/index?share_id='.$share_id);?>",
                "imgUrl": "<?=site_url('/static/img/ai.png');?>",
                "desc": "文案～～～"
            },
            $jShareWrap=$('.js_share-wrap'),
            $slActiveWrap=$('.sl-active_toast-wrap'),
            $questionPage=$('#question_page'),
            $inviteMask=$('.invite-mask'),
            succFnActive=function () {        
                $.ajax({
                    url: '/knowledge/share_ins_count',
                    type: 'get',
                    success: function (r) {
                        r=JSON.parse(r);
                        console.log(r.ret);
                        $jShareWrap.removeClass('show'); 
                        $slActiveWrap.text(r.msg).show();
                        if(r.ret==0){
                            $('.result-page .again-replay').removeClass('js_share_get_count');  
                            var hreflink=$('.result-page .again-replay').attr('data-type');  
                            console.log(hreflink);                    
                            $('.result-page .again-replay').attr('href',hreflink);
                         }
                        setTimeout(function(){
                            $slActiveWrap.text('').hide();
                            // if(r.ret==0){
                            //     window.location.reload();
                            // }
                        },2000);                      
                    },
                    error: function () {
                    }
                });
            };
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,              
                success: function (res) {
                    console.log('pyq');
                    succFnActive();
                },
                cancel: function (res) {
                  
                }
            });

            wx.onMenuShareAppMessage({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    console.log('py');
                    succFnActive();
                }
            });
            wx.onMenuShareQQ({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
            wx.onMenuShareQZone({
                title: shareContent.title,
                link: shareContent.link,
                imgUrl: shareContent.imgUrl,
                desc: shareContent.desc,
                success: function () {
                    // succFn();
                }
            });
        });
    })();
</script>


//遇見坑
1、如果生成的簽名param中的url與當前鏈接不一致控制臺會報錯。
2、shareContent中的圖片等保持同域名

6、時間戳的對比

<!-- 當前時間戳 -->
<input type="hidden" name="nowtime" value="<?php echo  time() ?>" >
  
 //js 當前時間大于活動結束時間
  if (Number($('input[name="nowtime"]').val()) >=Math.round(new Date('2020-10-25 10:00:00').getTime()/1000)) {
    $('.timeEndBox').text('活動已結束，感謝。').show();
    return false;
  };

7、合成海報html2canvas.min.js

html2canvas可以通過純JS對瀏覽器端進行截屏，但截圖的精確度還有待提高，部分css不可識別，所以在canvas中不能完美呈現原畫面樣式


//實例
function convertToPoster() {
    var $posterPageContent=$('#poster_page_content');
  ///這個地方只需要將useCORS設置成true，千萬不要加allowTaint:true這兩個不要同時加
    html2canvas($posterPageContent[0], {useCORS: true})
        .then(
            function (canvas) {
                var oImage=new Image();
// HTMLCanvasElement.toDataURL() 
//語法：canvas.toDataURL(type, encoderOptions);
// type為圖片格式，默認為 image/png；encoderOptions為圖片質量，默認為0.92
                oImage.src=canvas.toDataURL('image/png', 1);
                $(oImage)
                    .addClass('poster');
                $posterPageContent
                    .after(oImage)
                    .hide();
            }
        );
};

為了更清晰的前端合并圖片

<img class="copyImage" src="">
<a id="dl-hidden" style="display:none;"></a>
window.onload=function(){
    var IMAGE_URL;
    function takeScreenshot(){
        var shareContent=document.getElementById('letter');//需要截圖的包裹的（原生的）DOM 對象
        var width=shareContent.offsetWidth; //獲取dom 寬度
        var height=shareContent.offsetHeight; //獲取dom 高度
        var canvas=document.createElement("canvas"); //創建一個canvas節點

        var scale=3; //定義任意放大倍數 支持小數
        canvas.width=width * scale; //定義canvas 寬度 * 縮放
        canvas.height=height * scale; //定義canvas高度 *縮放
        canvas.getContext("2d").scale(scale,scale); //獲取context,設置scale

        // var rect=shareContent.getBoundingClientRect();//獲取元素相對于視察的偏移量
        // canvas.getContext("2d").translate(-rect.left,-rect.top);//設置context位置，值為相對于視窗的偏移量負值，讓圖片復位
        var opts={
            scale:scale, // 添加的scale 參數
            canvas:canvas, //自定義 canvas
            logging: true, //日志開關
            width:width, //dom 原始寬度
            height:height, //dom 原始高度
            backgroundColor: 'transparent',
        };
        html2canvas(shareContent, opts).then(function (canvas) {
            IMAGE_URL=canvas.toDataURL("image/png");
            $('.copyImage').attr('src',IMAGE_URL);
        })
    }

    function dataURLtoBlob(dataurl) {
        var arr=dataurl.split(','),
            mime=arr[0].match(/:(.*?);/)[1],
            bstr=atob(arr[1]),
            n=bstr.length,
            u8arr=new Uint8Array(n)
        while (n--) {
            u8arr[n]=bstr.charCodeAt(n)
        }
        return new Blob([u8arr], { type: mime })
    }

    function downloadBase64(dataUrl, filename) {
        var imageFile, href
        // const downloadLink=document.createElement('a')
        var downloadLink=document.getElementById('dl-hidden')
        try {
            var blob=dataURLtoBlob(dataUrl)
                var href=window.URL.createObjectURL(blob)
                downloadLink.download=filename
                downloadLink.href=href
                downloadLink.click()
        } catch (err) {
        } finally {
            if (href) {
                window.URL.revokeObjectURL(href)
            }
            // downloadLink.remove()
        }
    }
           // $(".letter-title").text('木子芳小芳');
            takeScreenshot();
            $("#save-local").click(function(e){
             downloadBase64(IMAGE_URL, 'zhengshu.png')
            })
}

8、計時器

  // 計時器
    var time_share=0;
    var timeStart=function () {
        var hour=0;
        var min=0;
        var sen=0;

        function showTime() {
             time_share ++;
            sen++;
            if (sen >=60) {
                min++;
                sen=0;
            }
            if (min >=60) {
                hour++;
                min=0;
            }
            if (hour >=12) {
                hour=0;
            }
            var dataStr="<span class='timespan'>" + (hour < 10 ? ("0" + hour) : hour) + "</span>:<span class='timespan'>" + (min < 10 ? ("0" + min) : min) + "</span>:<span class='timespan'>" + (sen < 10 ? ("0" + sen) : sen) + "</span>";
            $(".vtimeShow").html(dataStr);
        }
        setInterval(showTime, 1000);
       
    };

答題滑動輪播坑

-->答題滑動的時候，執行相關內容可以放在一個一個方法里，尋找合適時機觸發
 //  答題頁面的輪播交互
    var knowledgeSwiper;
    function handleStartDo() {
        knowledgeSwiper=new Swiper('.js_knowledge-swiper', {
            on: {
                //題目滑動
                slideChange: function () {
                    //slider的狀態判斷
                    if (knowledgeSwiper.isBeginning) {
                        $preSlider.addClass('disabled');
                    } else if (knowledgeSwiper.isEnd) {
                        $nextSlider.hide();
                        $submitPaper.show();
                    } else {
                        $preSlider.removeClass('disabled');
                        $submitPaper.hide();
                        $nextSlider.show();
                    };
                    $('#activeIndex').text(this.activeIndex + 1);
                }
            }
        });
        $('.js_pre-slider').off('click').on('click', function () {
            knowledgeSwiper.slidePrev();
        });
        $('.js_next-slider').off('click').on('click', function () {
            knowledgeSwiper.slideNext();
        });
    }; // 做題交互end

數據異步追加

//第一步--每條數據渲染的格式
function listHtmlRender(data, orderNum) {
        var htmlArr=[
            '<li>',
                '<span class="order">',
                    orderNum,
                '</span>',
                '<img src="' + data.headimgurl + '" class="avatar">',
                '<span class="nickname">',
                    data.nickname,
                '</span>',
                '<span class="time">'
                + '用時' + data.time_share + 's' +
                '</span>',
            '</li>'
        ];
        var htmlStr=htmlArr.join('');
        return htmlStr;
    };
//第二部ajax請求后的
for (var i=0; i < r.date.length; i++) {
  orderNum++;
  var listHtml=listHtmlRender(response.data[i], orderNum);
  $listBoxUl.append($(listHtml));
}

iframe適配

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

預覽及說明

視覺標準

下載及使用

1、微信關注“起點學院”服務號（掃描二維碼立即關注）；

2、回復關鍵詞“微信設計規范”至【起點學院】服務號后臺即可獲取下載地址。

下載后，只需要在頁面中引入dist/style/weui.css或者dist/style/weui.min.css其中之一即可。例如:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
</head>
<body>
</body>
</html>

開發

git clone https://github.com/weui/weui.git
cd weui
npm install -g gulp
npm install
npm start

運行npm start命令，會監聽src目錄下所有文件的變更，并且默認會在8080端口啟動服務器，然后在瀏覽器打開http://localhost:8080/example。

第三方擴展

文檔

WeUI 說明文檔參考 Wiki

License

The MIT License(http://opensource.org/licenses/MIT) 請自由地享受和參與開源

原文地址：https://github.com/weui/weui

信 8.0 更新的一大特色就是支持動畫表情，如果發送的消息只有一個內置的表情圖標，這個表情會有一段簡單的動畫，一些特殊的表情還有全屏特效，例如煙花表情有全屏放煙花的特效，炸彈表情有爆炸動畫并且消息和頭像也會隨之震動。

近日，前端工程師華峰用300行代碼實現微信表情包炸裂的特效，一起來看看做出來的效果吧：

據他描述：項目的核心是使用到了 lottie 動畫庫。

lottie 是 Airbnb 出品的、全平臺（Web、Android、IOS、React Native）的動畫庫，它的特點在于能夠直接播放使用 Adobe After Effects 制作的動畫。設計師在 After Effects 中，利用 Bodymovin 插件把動畫導出為 JSON 格式之后，開發者就能夠通過相應平臺的 SDK 進行播放。

發送普通消息——核心

發送普通消息時，用戶在輸入框輸入完消息之后，點擊發送，就會把該條消息追加到消息列表中，并清空輸入框中的內容。那么這里先給發送按鈕添加點擊事件：

sendBtn.addEventListener("click", ()=> {
  const msg=msgInputEle.value;
  if (msg) {
    appendMsg(msg);
  }
});

在事件處理函數中：

判斷用戶是否輸入了消息。
如果輸入了就追加到消息列表中。

來看一下 appendMsg() 函數的代碼：

function appendMsg(msg, type) {
  // 創建消息元素
  const msgEle=panelEle.appendChild(document.createElement("div"));
  msgEle.classList.add("message", "mine"); // 設置為“我“發送的樣式
  msgEle.innerHTML=`
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${msg}</span></p>
  `;
  // 滾動到最新消息
  panelEle.scrollTop=panelEle.scrollHeight;
  msgInputEle.value="";
}

函數接收兩個參數，msg 和 type，分別是要追加的消息內容和類型，type 為可選的，不傳則認為是普通文本消息，如果傳遞了 "stickers" 則為表情消息，現在還用不到它。在這個函數中主要做了下面幾件事情：

按照消息的 HTML 結構創建一個新的消息元素 msgEle，并追加到消息列表中。
把消息的樣式設置為我發送的。
內部的元素分別為頭像和文本消息，使用模板字符串的形式賦值給 msgEle 的 innerHTML 屬性中，并在 <p> 中使用 msg 變量的值。
最后把滾動條滾動到最新的消息處，并清空輸入框中的消息。

這樣就可以發送普通的文本消息了。

發送動畫表情

在發送動畫表情之前，需要先加載動畫表情。在 index.js 的最上方先定義表情名稱和表情動畫文件路徑的鍵值對信息：

const stickers={
  bomb: {
    path: "./3145-bomb.json",
  },
  pumpkin: {
    path: "./43215-pumpkins-sticker-4.json",
  },
};

我們會根據 bomb 、 pumkin 這樣的 key 來找到對應的動畫路徑。接著初始化彈出層中的表情以供用戶選擇：

// 初始化表情面板，也可以在表情選擇窗彈出時再初始化
Object.keys(stickers).forEach((key)=> {
  const lottieEle=stickersEle.appendChild(document.createElement("span"));
  // 對每個表情創建 lottie 播放器
  const player=lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: true,
    autoplay: false,
    path: stickers[key].path,
  });
  // 當選擇表情時，發送消息，并設置類型為 sticker 表情消息
  lottieEle.addEventListener("click", ()=> {
    appendMsg(key, "sticker");
  });
  // 當鼠標劃過時，播放動畫預覽
  lottieEle.addEventListener("mouseover", ()=> {
    player.play();
  });
  // 當鼠標劃過時，停止動畫預覽
  lottieEle.addEventListener("mouseleave", ()=> {
    player.stop();
  });
});

這里的代碼分別作了下邊這些操作：

遍歷存儲表情信息的對象。
創建一個 lottie 的容器，使用 span 元素，因為 lottie 動畫的播放器需要掛載到一個具體的 html 元素中。
調用 lottie 的 loadAnimation() 加載動畫，它需要傳遞這樣幾個參數：

container: 播放器要掛載到的容器。
renderer：可以選擇是使用 svg 還是 canvas 渲染動畫。
loop: 是否循環播放，由于此處是在表情選擇彈出層中預覽動畫，所以支持循環播放。
autoplay：是否自動播放，這里設置為了否，后邊讓它在鼠標劃過時再播放動畫。
path：動畫 json 文件路徑，直接從對象中獲取。

loadAnimation() 會返回 lottie 的實例，把它保存在 player 中。

然后后邊則注冊了幾個事件：

當 lottieEle 也就是表情被點擊時，發送表情消息，給 appendMsg() 的 msg 參數設置為表情的 key，type 參數設置為 "sticker"。
當鼠標劃過表情時，開始播放動畫。
當鼠標劃出表情時，停止動畫。

接著給發送表情按鈕添加事件，點擊時，切換表情彈出層的顯示狀態：

chooseStickerBtn.addEventListener("click", ()=> {
  stickersEle.classList.toggle("show");
});

這時點擊發送表情按鈕就可以看到表情選擇彈出層了。現在還不能發送表情，因為還沒在 appendMsg() 函數中處理，現在來修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <p> 元素里添加任何信息：

function appendMsg(msg, type) {
 // ... 
  msgEle.innerHTML=`
    <img class="avatar" src="./me.png" alt="" />
    <p><span>${type==="sticker" ? "" : msg}</span></p>
  `;
}

然后在它的下方，調用 playSticker() 函數來播放動畫：

// 處理表情消息，播放相關動畫
if (type==="sticker") {
  playSticker(msg, msgEle);
}

playSticker() 函數接收兩個參數，一個是表情的 key，一個是消息元素。此時的 msg 變量的內容就是在 lottieEle 點擊事件中傳遞過來的表情 key。函數中的代碼如下：

function playSticker(key, msgEle) {
  // 表情消息，創建 lottie 動畫
  const lottieEle=msgEle.querySelector("span");
  lottieEle.style.width="40px";
  lottieEle.style.height="40px";
  lottie.loadAnimation({
    container: lottieEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: stickers[key].path,
  });
}

在這個函數里主要做了下邊幾項操作：

獲取消息中的 span 元素，它將作為 lottie 的動畫容器。
設置表情動畫的寬高為 40px。
使用 lottie 加載動畫，并設置循環播放為 false，自動播放為 true，來讓表情發送時自動播放動畫，且只播放一次。

現在可以發送表情消息了，相關的動畫也會自動播放，接下來看一下怎么實現炸彈的全屏動畫和對消息元素的晃動效果。

發送帶全屏特效的表情

對于這種帶全屏特效的表情可以單獨進行判斷，也可以在保存表情的對象中定義相關的操作，這里為了簡單起見，我們單獨判斷用戶是否發送了炸彈表情，然后施加相應特效。

首先在 appendMsg() 函數里，進行判斷，如果發送的消息是表情消息，且表情為炸彈，則播放全屏動畫并晃動消息：

function appendMsg(msg, type) {
  if (type==="sticker") {
    playSticker(msg, msgEle);
    if (msg==="bomb") {
      // 播放爆炸動畫
      setTimeout(()=> {
        playExplosion(msgEle);
      }, 800);
      // 晃動消息列表
      shakeMessages();
    }
  }
}

這里爆炸全屏動畫延遲了 800 毫秒之后再執行，目的是在炸彈表情播放到合適的時間時，再播放全屏動畫，播放動畫使用了 playExplosion() 函數，并傳遞了消息元素進去。在爆炸全屏動畫結束之后，調用 shakeMessages() 來晃動消息。這里先看一下 playExplosion() 函數的代碼：

function playExplosion(anchor) {
  const explosionAnimeEle=anchor.appendChild(document.createElement("div"));
  explosionAnimeEle.style.position="absolute";
  explosionAnimeEle.style.width="200px";
  explosionAnimeEle.style.height="100px";
  explosionAnimeEle.style.right=0;
  explosionAnimeEle.style.bottom=0;
  const explosionPlayer=lottie.loadAnimation({
    container: explosionAnimeEle,
    renderer: "svg",
    loop: false,
    autoplay: true,
    path: "./9990-explosion.json",
  });
  explosionPlayer.setSpeed(0.3);
  // 播放完成后，銷毀爆炸相關的動畫和元素
  explosionPlayer.addEventListener("complete", ()=> {
    explosionPlayer.destroy();
    explosionAnimeEle.remove();
  });
}

playExplosion() 函數接收一個 anchor 錨點，就是說基于哪個位置開始播放全屏動畫，由于示例中的動畫畫幅比較小，所以把它固定在了最新發送的消息的下方，這里爆炸動畫的 anchor 就是消息元素，之后函數做了下邊的這些操作：

添加全屏動畫元素，設置為絕對定位，寬度 200px，高度 100px，放在最新消息元素的右下角。
加載 lottie 動畫，不循環、自動播放。
由于原動畫速度過快，這里調用 lottie 實例的 setSpeed() 方法，把速度設置為 0.3 倍速。
之后給 lottie 實例設置事件監聽："complete"，它會在動畫執行完成時觸發，里邊銷毀了 lottie 實例和全屏動畫元素。

這樣全屏動畫的效果就實現了。接下來看消息晃動的代碼：

function shakeMessages() {
  [...panelEle.children]
    .reverse()
    .slice(0, 5)
    .forEach((messageEle)=> {
      const avatarEle=messageEle.querySelector("img");
      const msgContentEle=messageEle.querySelector("p");
      avatarEle.classList.remove("shake");
      msgContentEle.classList.remove("shake");
      setTimeout(()=> {
        avatarEle.classList.add("shake");
        msgContentEle.classList.add("shake");
      }, 700);
    });
}

這個函數的操作是：

使用 reverse() 和 slice() 對最新的 5 條消息進行晃動，也可以把 5 改大一點，對更多消息進行晃動。
然后在循環中，分別給頭像和消息添加 shake class 執行晃動動畫，這個 class 的內容稍后再介紹。
要注意的是，在添加 shake class執行動畫前，需要先刪除 shake，因為有的消息可能在之前已經晃動過了，例如當連續發了多個炸彈表情時。后邊在添加 shake class 時，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動畫執行到一定程度時再晃動消息。

接下來看一下 shake class 的定義，在 style.css 中添加下方代碼：

.shake {
  animation: shake 0.8s ease-in-out;
}
@keyframes shake {
  from {
    transform: translate3d(0, 0px, 0px);
  }
  10% {
    transform: translate3d(6px, -6px, 0px);
  }
  20% {
    transform: translate3d(-5px, 5px, 0px);
  }
  30% {
    transform: translate3d(4px, -4px, 0px);
  }
  35% {
    transform: translate3d(-3px, 3px, 0px);
  }
  39% {
    transform: translate3d(2px, -2px, 0px);
  }
  41% {
    transform: translate3d(-1px, 1px, 0px);
  }
  42% {
    transform: translate3d(0px, 0px, 0px) rotate(20deg);
  }
  52% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(8deg);
  }
  65% {
    transform: rotate(-3deg);
  }
  67% {
    transform: rotate(1deg);
  }
  70% {
    transform: rotate(0deg);
  }
  to {
    transform: translate3d(0px, 0px, 0px) rotate(0);
  }
}

.shake 中使用了 shake keyframes 定義的動畫，執行時間為 0.8s，動畫執行函數為 ease-in-out。Keyframes 里的代碼比較多，但是都是很簡單的，就是模擬了爆炸時的效果，移動 x 軸和 y 軸的偏移，每次的偏移幅度越來越小，并且越來越快，可以看到百分比的間隔越來越小。在動畫進行到 42% 的時候，加了一些旋轉動畫，這樣就有了落地時的震動效果。由于使用 rotate() 旋轉時的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來實現更真實的效果：

.message p {
  transform-origin: left bottom;
}
.message.mine p {
  transform-origin: right bottom;
}

這里把對方發送的消息的軸心設置在左下角，自己發送的消息則設置在了右下角。

本文所有地址：

示例地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples
代碼地址：https://codechina.csdn.net/mirrors/zxuqian/html-css-examples/-/tree/master/31-05-wechat-emoji-effect
lottie: https://cdnjs.com/libraries/bodymovin ，下載 lottie.min.js
南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
炸彈表情：https://lottiefiles.com/3145-bomb
爆炸動畫：https://lottiefiles.com/9990-explosion
Lottie 官網：https://airbnb.io/lottie

總結

現在，這個模擬微信 8.0 動畫表情的功能就實現了。主要就是下邊幾點：

使用 lottie 庫加載并播放動畫。
確定全屏動畫的位置和播放時間。
消息晃動動畫的 CSS 實現。

那么問題來了，作為編程界大佬的C語言能否實現微信對話框爆炸特效呢？這個需要大家一起探索！小編相信C語言的強大，是完全可以做到的，甚至更加簡單，期待各位小伙伴一起討論~

如果你對學習編程有興趣，也想有一天別人使用你開發的軟件或小程序、小特效，沒基礎也完全不用擔心，因為機會來了，點擊下方的了解更多鏈接，開啟你的編程之旅~

在這里我們有什么？

1、海量學習資源

2、名師一對一指導

3、同行之間的相互切磋

4、外包項目拿到手軟

心動不如行動，趕緊點擊下方了解更多免費領取你的專屬福利吧~

在線咨詢

上一篇：逆世輪回 – 為網絡小說《仙逆》量身定制
下一篇：如何在SAP登錄頁面添加信息

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商