建站
咨詢
售后
建站咨詢
新聞中心
小程序如何使用css3動(dòng)畫
1、利用樣式實(shí)現(xiàn)小程序動(dòng)畫(用法和css用法相識(shí))
10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有欽北免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
wxml 文件
image class="aniamtion" src="../../images/page4.jfif" style="width:200rpx;height:200rpx;? position:? relative;"/image
wxss文件
.aniamtion {
animation: mymove 5s infinite;
/* //infinite屬性是表示無(wú)限循環(huán)的意思，沒有這個(gè)屬性的話動(dòng)畫只執(zhí)行一次。 */
}
@keyframes mymove {
from {
/* left: 0px; */
/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); */
transform: rotate3d(100,200,300,0deg);
}
to {
/* left: 200px; */
/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); */
transform: rotate3d(200,300,400,360deg);
}
}
2、 用小程序的API來實(shí)現(xiàn)動(dòng)畫
用wx.createAnimation(object) 來創(chuàng)建一個(gè)動(dòng)畫 --返回一個(gè)animation對(duì)象
創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation。
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
調(diào)用實(shí)例的方法來描述動(dòng)畫。
Animation.step() 表示一組動(dòng)畫的完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫
rotate(){
this.animation.rotate(150).step() //對(duì)動(dòng)畫進(jìn)行簡(jiǎn)單的描述
this.setData({
? ? ?animation:this.animation.export()
})
},
最后通過動(dòng)畫實(shí)例的 export 方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的 animation 屬性。
this.animation.export() 導(dǎo)出動(dòng)畫隊(duì)列。export 方法每次調(diào)用后會(huì)清掉之前的動(dòng)畫操作
rotate(){
this.animation.rotate(150).step() //對(duì)動(dòng)畫進(jìn)行簡(jiǎn)單的描述
this.setData({ // 在setData({}) 導(dǎo)出動(dòng)畫數(shù)據(jù)數(shù)據(jù)給組件
? ? ?animation:this.animation.export()
})
},
完整的wxml
view class="container"
view animation="{{animation}}" class="view"
將做動(dòng)畫的塊
/view
/view
button type="default" size="mini" bindtap="rotate"
旋轉(zhuǎn)
/button
完整的wxjs
Page({
data: {
animation:''
},
onReady: function () {
this.animation = wx.createAnimation({
duration:1000,
timingFunction:'linear',
delay:100,
transformOrigin:"left top 0"
})
},
rotate(){
this.animation.rotate(150).step().translate(100).step()
this.setData({
animation:this.animation.export()
})
}
})
3、用選擇器來綁定組件來來實(shí)現(xiàn)組件的動(dòng)畫（小程序2.9.0 的庫(kù)可用，版本不夠會(huì)報(bào)this.animate不是一個(gè)方法）
textpages/index7/index7.wxml/text
view id="container" style="height: 100px; width: 100px; background-color: blue;"
container
/view
view class="block" style="height: 100px; width: 100px;background-color: #ccc;"
block
/view
用選擇器選擇相應(yīng)的組件進(jìn)行相應(yīng)的動(dòng)畫
進(jìn)行關(guān)鍵幀的處理
onLoad: function () {
this.animate('#container', [
{ opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
{ opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },
{ opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },
], 5000)
this.animate('.block', [
{ scale: [1, 1], rotate: 0, ease: 'ease-out' },
{ scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},
{ scale: [2, 2], rotate: 90 },
], 5000)
},
}
4、用第三方的庫(kù) animation.css
需要做的有
從下載css動(dòng)畫文件
把 .css 文件 改名成 .wxss文件（可進(jìn)行相應(yīng)的需改，畢竟小程序的大小限制擺在那里）
把它引入到你的app.wxss文件中
@import “動(dòng)畫文件的相對(duì)目錄”
在用的時(shí)候把他和你的樣式綁定
view class="swing" style="height: 100px; width: 100px;background-color: #ccc;"
block
/view
// 給類名為swing 的文件綁定swing 的動(dòng)畫
.swing{
animation: swing 5s infinite;
}
小程序開發(fā)-基礎(chǔ)-html+css
rem由來 ：font size of the root element，那么rem是個(gè)單位，單位大小由它第一代老祖宗的 font-size 的大小決定。現(xiàn)在前端碼農(nóng)們?yōu)榱四茉诟鱾€(gè)屏幕上看到一個(gè)健康的網(wǎng)頁(yè)在默默的犧牲著自己的健康，因?yàn)椴粌H要知道rem是個(gè)單位，更重要的是要知道怎么能在不同分辨率下呈現(xiàn)的頁(yè)面都很NB。
事故造成原因：
1.px單位在PC上很流行，在手機(jī)屏幕上一看，MLGB的，同樣的12px卻小的跟螞蟻似的。
2.好不容易在iPhone4上調(diào)的正常了，換個(gè)菊花牌手機(jī)，MBD不堪入目了。
3.知道了rem的用法，但是html的font-size到底是多少才合適啊啊啊，媽蛋~。
好了，那么現(xiàn)在來解決這些問題。
在解決之前，麻煩各位大嬸要了解一些你可能不想了解的東東（警告：不了解這些就不能知道真相喲~）：
1. 物理像素(physical pixel)
我們看到的每個(gè)屏幕都是由一顆顆我們?nèi)庋垭y以看到的小顆粒（物理像素）組成的。
2.邏輯像素
是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如說CSS像素)。
3.設(shè)備的像素比(device pixel ratio)簡(jiǎn)稱DPR
它的數(shù)值體現(xiàn)了物理像素和邏輯像素之間的關(guān)系，用公式可以計(jì)算出該設(shè)備的DPR的大小：
DPR= 物理像素 / 邏輯像素
那么了解了上面這些概念，就可以知道，為什么css在pc上寫著font-size=12px;但是換到手機(jī)上卻變小了？因?yàn)镈PR啊啊啊，大哥~。
沒錯(cuò)，我們?cè)陔娔X屏幕上的DPR是1，但是手機(jī)卻不同，可能是它可能是2，也可能是3。獲取設(shè)備DPR的方法還是有的：
1.在JavaScript中，通過window.devicePixelRatio來獲取
2.在css中，可以通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和?-webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)不同DPR的設(shè)備，做一些樣式適配(這里只針對(duì)webkit內(nèi)核的瀏覽器和webview)。
本人也在網(wǎng)上看了不少動(dòng)態(tài)設(shè)置rem的文章，下面把幾個(gè)常用的列舉出來：
一，用媒體查詢來設(shè)置html的font-size：
@mediascreen and (min-width:320px) {html{font-size:14px;}} @mediascreen and (min-width:360px) {html{font-size:16px;}} @mediascreen and (min-width:400px) {html{font-size:18px;}} @mediascreen and (min-width:440px) {html{font-size:20px;}} @mediascreen and (min-width:480px) {html{font-size:22px;}} @mediascreen and (min-width:640px) {html{font-size:28px;}}
二、利用js來動(dòng)態(tài)設(shè)置
!(function(doc, win){vardocEle = doc.documentElement,? ? ? ? evt ="onorientationchange"inwindow?"orientationchange":"resize",? ? ? ? fn =function(){varwidth = docEle.clientWidth;? ? ? ? ? ? width (docEle.style.fontSize =20* (width /320) +"px");? ? ? ? };? ? ? ? win.addEventListener(evt, fn,false);? ? doc.addEventListener("DOMContentLoaded", fn,false); }(document,window));
我要說的是最后一種，也是我認(rèn)為目前比較好的實(shí)現(xiàn)方法：
利用js計(jì)算當(dāng)前設(shè)備的DPR，動(dòng)態(tài)設(shè)置在html標(biāo)簽上，并動(dòng)態(tài)設(shè)置html的font-size，利用css的選擇器根據(jù)DPR來設(shè)置不同DPR下的字體大小（這個(gè)方法很不錯(cuò)哦~）
!function(win, lib){vartimer,? ? ? ? doc? ? = win.document,? ? ? ? docElem = doc.documentElement,? ? ? ? vpMeta? = doc.querySelector('meta[name="viewport"]'),? ? ? ? flexMeta = doc.querySelector('meta[name="flexible"]'),? ? ? ? dpr? =0,? ? ? ? scale =0,? ? ? ? flexible = lib.flexible || (lib.flexible = {});// 設(shè)置了 viewport metaif(vpMeta) {console.warn("將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例");varinitial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/);if(initial) {? ? ? ? ? ? scale =parseFloat(initial[1]);// 已設(shè)置的 initialScaledpr =parseInt(1/ scale);// 設(shè)備像素比 devicePixelRatio}? ? }// 設(shè)置了 flexible Metaelseif(flexMeta) {varflexMetaContent = flexMeta.getAttribute("content");if(flexMetaContent) {varinitial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),? ? ? ? ? ? ? ? maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/);if(initial) {? ? ? ? ? ? ? ? dpr =parseFloat(initial[1]);? ? ? ? ? ? ? ? scale =parseFloat((1/ dpr).toFixed(2));? ? ? ? ? ? }if(maximum) {? ? ? ? ? ? ? ? dpr =parseFloat(maximum[1]);? ? ? ? ? ? ? ? scale =parseFloat((1/ dpr).toFixed(2));? ? ? ? ? ? }? ? ? ? }? ? }// viewport 或 flexible// meta 均未設(shè)置if(!dpr !scale) {// QST// 這里的 第一句有什么用 ?// 和 Android 有毛關(guān)系 ?varu = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),? ? ? ? ? ? _dpr = win.devicePixelRatio;// 所以這里似乎是將所有 Android 設(shè)備都設(shè)置為 1 了dpr = u ? ( (_dpr =3 (!dpr || dpr =3))? ? ? ? ? ? ? ? ? ? ? ? ?3: (_dpr =2 (!dpr || dpr =2))? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2:1)? ? ? ? ? ? ? ? :1;? ? ? ? scale =1/ dpr;? ? }? ? docElem.setAttribute("data-dpr", dpr);// 插入 viewport metaif(!vpMeta) {? ? ? ? vpMeta = doc.createElement("meta");? ? ? ? ? ? ? ? vpMeta.setAttribute("name","viewport");? ? ? ? vpMeta.setAttribute("content","initial-scale="+ scale +", maximum-scale="+ scale +", minimum-scale="+ scale +", user-scalable=no");if(docElem.firstElementChild) {? ? ? ? ? ? docElem.firstElementChild.appendChild(vpMeta)? ? ? ? }else{vardiv = doc.createElement("div");? ? ? ? ? ? div.appendChild(vpMeta);? ? ? ? ? ? doc.write(div.innerHTML);? ? ? ? }? ? }functionsetFontSize(){varwinWidth = docElem.getBoundingClientRect().width;if(winWidth / dpr 540) {? ? ? ? ? ? (winWidth =540* dpr);? ? ? ? }// 根節(jié)點(diǎn) fontSize 根據(jù)寬度決定varbaseSize = winWidth /10;? ? ? ? docElem.style.fontSize = baseSize +"px";? ? ? ? flexible.rem = win.rem = baseSize;? ? }// 調(diào)整窗口時(shí)重置win.addEventListener("resize",function(){? ? ? ? clearTimeout(timer);? ? ? ? timer = setTimeout(setFontSize,300);? ? },false);// 這一段是我自己加的// orientationchange 時(shí)也需要重算下吧win.addEventListener("orientationchange",function(){? ? ? ? clearTimeout(timer);? ? ? ? timer = setTimeout(setFontSize,300);? ? },false);// pageshow// keyword: 倒退 緩存相關(guān)win.addEventListener("pageshow",function(e){if(e.persisted) {? ? ? ? ? ? clearTimeout(timer);? ? ? ? ? ? timer = setTimeout(setFontSize,300);? ? ? ? }? ? },false);// 設(shè)置基準(zhǔn)字體if("complete"=== doc.readyState) {? ? ? ? doc.body.style.fontSize =12* dpr +"px";? ? }else{? ? ? ? doc.addEventListener("DOMContentLoaded",function(){? ? ? ? ? ? doc.body.style.fontSize =12* dpr +"px";? ? ? ? },false);? ? }? ? ? setFontSize();? ? flexible.dpr = win.dpr = dpr;? ? flexible.refreshRem = setFontSize;? ? flexible.rem2px =function(d){varc =parseFloat(d) *this.rem;if("string"==typeofd d.match(/rem$/)) {? ? ? ? ? ? c +="px";? ? ? ? }returnc;? ? };? ? flexible.px2rem =function(d){varc =parseFloat(d) /this.rem;if("string"==typeofd d.match(/px$/)) {? ? ? ? ? ? c +="rem";? ? ? ? }returnc;? ? }}(window,window.lib || (window.lib = {}));
忘了說了，手機(jī)淘寶很多頁(yè)面用的就是這種方法來適配終端的。
小程序wxss和css的區(qū)別
WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式。
WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。
為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時(shí)為了更適合開發(fā)微信小程序，WXSS 對(duì) CSS 進(jìn)行了擴(kuò)充以及修改。
與 CSS 相比，WXSS 擴(kuò)展的特性有：
（1）尺寸單位
（2）樣式導(dǎo)入
尺寸單位
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
樣式導(dǎo)入
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。
小程序開發(fā)（二）-頁(yè)面樣式
項(xiàng)目根目錄下創(chuàng)建 app.wxss 文件，文件定義的樣式規(guī)則適用于所有頁(yè)面。采用css定義樣式。
小程序官方推薦使用flex布局。pages/home目錄下新建home.wxss文件，文件的樣式只適用于當(dāng)前頁(yè)面。
rpx是小程序?yàn)檫m應(yīng)不同寬度的手機(jī)而發(fā)明的長(zhǎng)度單位，所有手機(jī)寬度都為750rpx。
weui是騰訊官方維護(hù)的UI框架，我們可以直接拿來用。
將weui庫(kù)中dist目錄下的app.wxss拷貝到我們項(xiàng)目中的 app.wxss 中，在wxml文件中直接使用定義好的規(guī)則, 如 weui-btn 。
圖片使用 image 標(biāo)簽。默認(rèn)寬度為屏幕寬度。
圖片輪播使用 swiper 標(biāo)簽。
二、支付寶小程序前端樣式的設(shè)計(jì).acss樣式詳解
在視頻中已經(jīng)說過了，小程序的設(shè)計(jì)思想和原生app的設(shè)計(jì)思想頗為相似，基本的應(yīng)用單元為頁(yè)面。當(dāng)然對(duì)于一個(gè)頁(yè)面來說每一個(gè)元素的放置位置在哪兒以及顯示成什么樣子這個(gè)是由 樣式來決定的 。我們知道在web開發(fā)中樣式是在css文件中規(guī)定的，叫做層疊樣式表 (Cascading Style Sheets)。其實(shí)在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對(duì)css3進(jìn)行了擴(kuò)充而已。
那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。 上邊已經(jīng)說了.acss其實(shí)包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看
第一次看到這個(gè)東西也能猜到他是干什么用的。在css中我們知道規(guī)定大小一般使用像素(px)這個(gè)單位。比如顯示生活中我們說房子128㎡那這兒的單位是平方米，在開發(fā)中需要更加精準(zhǔn)的大小就是px像素。像素就非常精細(xì)了因?yàn)樵谖覀冿@示屏幕中像素是最小的顯示單元。這個(gè)道理如果不懂的話就找個(gè)LED屏幕仔細(xì)看，LED屏幕上一個(gè)一個(gè)的發(fā)光二極管可以想象為像素。
我們知道手機(jī)屏幕有大有小，就拿iPhone來說，iPhone 6 plus比iPhone 5要大。那么就說明plus的像素比5要多。對(duì)比：
加入有一個(gè)160px寬度的紅色矩形在這兩種手機(jī)中的位置如下：
rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如何自適應(yīng)呢？看下邊的分析：
看下圖：
在模塊化開發(fā)中我們有時(shí)候不得不在頁(yè)面中使用其他的第三方庫(kù)的樣式，而第三方庫(kù)的樣式是保存在第三方包中的，我們不可能全部復(fù)制到我們的.acss文件中，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表。
當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類，如
選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當(dāng)然在支付寶小程序的樣式中特殊的地方就是：
※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用；
※ 不能使用屬性選擇器，例如,以下寫法不被支持：
我之前說過小程序開發(fā)的應(yīng)用單元為頁(yè)面。其實(shí)我們?cè)?axml中寫的頁(yè)面并不包含頁(yè)面容器，就相當(dāng)于我們做一個(gè)頁(yè)面但是body標(biāo)簽不用寫那如果我們要改變整個(gè)頁(yè)面的背景怎么辦呢?其實(shí)有一個(gè)固定的選擇器。例如：
可以通過 page 元素選擇器來設(shè)置頁(yè)面容器的樣式，比如頁(yè)面背景色:
在你想改變頁(yè)面容器的頁(yè)面中定義該樣式也可以，全局定義也可以，例如我想將test這個(gè)頁(yè)面的頁(yè)面容器背景設(shè)置為藍(lán)色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式
下節(jié)是視圖層講解，如果有任何問題可以再下方給我留言或者發(fā)郵件到 [email protected] 我在收到郵件后會(huì)回復(fù)。
本文標(biāo)題：小程序樣式和css,小程序 樣式
網(wǎng)頁(yè)地址：http://fisionsoft.com.cn/article/dsshiii.html
