中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章展示了如何實(shí)現(xiàn)“完成點(diǎn)擊刪除按鈕后，列表自動(dòng)更新”的效果。

在上一篇教程中，與大家分享了微信列表滑動(dòng)顯示刪除按鈕的效果。

今天進(jìn)一步完善刪除特效，我們將向大家展示，如何實(shí)現(xiàn)“完成點(diǎn)擊刪除按鈕后，列表自動(dòng)更新”的效果。

一、最終效果

二、觸發(fā)介紹

• 單擊
• 大小
• 移動(dòng)
• 透明度

三、制作思路

1. 點(diǎn)擊“刪除”按鈕后，紅色背景放大，“刪除”字樣變換為“確認(rèn)刪除”；
2. 點(diǎn)擊“確認(rèn)刪除”，隱藏當(dāng)前行，下方列表上移。

四、制作過(guò)程

PS: 本教程將在上一篇教程源文件的基礎(chǔ)上繼續(xù)進(jìn)行。文件可以在上一篇教程中下載，也可以直接點(diǎn)擊這里直接下載：https://pan.baidu.com/s/1zpVeHD9AUIrr96hRBbrpFQ

1. 創(chuàng)建“單擊”觸發(fā)條件，并且將對(duì)應(yīng)圖層選擇“刪除”圖層。

2. 在左側(cè)圖層面板，選擇“刪除圖層”，點(diǎn)擊加號(hào)按鈕，添加“大小”選項(xiàng)，并且將“變換方式”設(shè)置為“大小”，“大小”尺寸設(shè)置為“175×69.1”。

3. 接著我們同樣選擇“刪除圖層”，添加“移動(dòng)”選項(xiàng)，并且將“坐標(biāo)位”設(shè)置為“移動(dòng)至”，將參數(shù)設(shè)置為-107。因?yàn)樵瓌h除按鈕的背景大小為67.78，變形后大小為175，所以2者差值大約107。

4. 此時(shí)，點(diǎn)擊按鈕時(shí)，按鈕背景放大的特效已完成。接著我們對(duì)文字的顯示特效進(jìn)行設(shè)置，即點(diǎn)擊按鈕后“刪除”字樣變換為“確認(rèn)刪除”。所以我們添加2個(gè)透明度的參數(shù)完成文字變化的特效。

5. 首先我們添加新的圖層，用于顯示“確認(rèn)刪除”字樣，并且將該圖層默認(rèn)透明度修改成0。

6. 然后我們點(diǎn)擊左側(cè)圖層中的“刪除”圖層，然后添加“透明度”選項(xiàng)設(shè)置，并且將透明度設(shè)置為0。同樣，將新增的“確認(rèn)刪除”圖層，添加“透明度”選項(xiàng)設(shè)置，并且將透明度設(shè)置為100。

7. 下面我們接著完成點(diǎn)擊“確認(rèn)刪除”按鈕后，聊天記錄被刪除，聊天列表更新的特效為了實(shí)現(xiàn)這以效果，我們將對(duì)“確認(rèn)刪除”進(jìn)行設(shè)置，點(diǎn)擊按鈕后，“聊天記錄+標(biāo)記未讀+確認(rèn)刪除”被隱藏，列表上移實(shí)現(xiàn)更新效果。

8. 我們選擇“確認(rèn)刪除”圖層，新創(chuàng)建一個(gè)“單擊”觸發(fā)效果，我們?yōu)椤癑D圖層、刪除容器層、標(biāo)記未讀容器層”分別創(chuàng)建三個(gè)“透明度”的選項(xiàng)設(shè)置，并且將透明度值都修改成0。

9. 最后我們?yōu)椤傲斜怼睂犹砑右粋€(gè)移動(dòng)的動(dòng)效，并且將移動(dòng)至的坐標(biāo)值修改為X：0/Y：132.29。

至此，我們完成了微信列表頁(yè)面，滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊刪除按鈕，列表更新的整個(gè)特效的制作過(guò)程。

本次教程源文件下載地址：https://pan.baidu.com/s/1GtqWxosNy3Q2zgMjV9mWQQ

如果大家對(duì)交互設(shè)計(jì)比較感興趣，可以訂閱我的專欄，我將會(huì)不定期的更新教程，歡迎大家與我交流。

本文由 @ioioi 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議。