catalog:
1. Animation effect based on CSS3
2. Animation effect based on JS
4. Animation effect of wechat applet
5. Collection of series articles from wechat applet to Hongmeng js development
When entering the APP, there is usually a welcome interface to display the name and logo of the APP and pre load some data. Since it is a welcome page, some animation elements are naturally indispensable. Simple use of CSS3 and JS animation effects, progress components and countdown to roll up a welcome page. Direct effect:
1. Animation effect based on CSS3
1.1 set the animation attribute to the animation element.
- Animation name: animation name
- Animation duration: animation duration
- Animation delay: the delay time before the animation starts
- Animation iteration count: the number of animation repetitions
- Animation timing function: animation execution speed
- Animation fill mode: animation mode
<image src="/common/huaWei.jpeg" class="logo"></image>
.logo {
width: 300px;
height: 300px;
border-radius: 150px;
animation-name: an1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: none;
}1.2 use "@ keyframes animation name" to match and set animation rules.
@keyframes an1 {
from {
transform: rotate(180deg);
opacity: 0.3;
}
to {
transform: rotate(360deg);
opacity: 1.0;
}
}In addition to from and to, you can also use percentage (e.g. 20% {...}) Method to set the effect during animation.
In the above two steps, the logo rotation and gradually clear animation effect of HUAWEI in gif figure are realized.
2. Animation effect based on JS
2.1 given id/ref and other attributes of animation elements, they can be used for element matching.
<image src="/common/liteMall.png" class="textImg" id="textImg"></image>
2.2 get the element instance in onShow() method, and use animate() method to give the animation rules and basic attributes. Note that this step has no effect in onInit() and onReady().
animate() accepts two parameters. The first is an array, which specifies the keyframe effect of the animation. The second is the object, which specifies the basic attributes of animation.
2.3 call the play() method to start animation execution.
onShow() {
// Animate
let textImg = this.$element("textImg").animate([
{
transform: {translateY: '200px'}, opacity: 0.1
},
{
transform: {translateY: '0px'}, opacity: 1
}
], {
duration: 5000,
easing: "linear-out-slow-in",
fill: "forwards",
iterations: 1
});
textImg.play();
......
}This method is not described in the developer documentation, but it is confirmed to be available, and the IDE is also prompted.
The key input in transform is not prompted.
After writing here, there will be a red line saying that the attribute is missing, but the operation is OK and can be ignored. If you want to use an array, you can declare it as a variable separately, and then enter it as an argument to the animate() method.
In the above three steps, the animation effect of "litemall" in gif drawing moving up from below and gradually becoming clear is realized.
Compared with the animation technology of CSS3, using JS to realize animation will be more flexible. The animation can be defined in onShow() and executed after the user performs certain operations. CSS3 can only be executed in a certain time after the page is displayed, but you can define richer animation gradient effects in the form of percentage.
3. JS timer
The two timing functions setTimeout() and setInterval() can be used seamlessly in Hongmeng.
The countdown in the gif diagram uses setInterval() to count down every 1 second, change the number of ellipsis, and clear the timer when the countdown reaches 0. To prevent zombie threads from affecting performance, remember to call clearTimeout() and clearInterval() to clear the timer.
Countdown section, hml view layer:
<div class="loading">
<progress type="circular"></progress>
<text>
{{ loading }}
</text>
</div>
<text class="count">
{{ seconds }}
</text>css render layer:
.loading {
width: 100%;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
progress {
width: 120px;
height: 120px;
}
.loading>text {
font-size: 40px;
color: #666666;
}
.count {
position: fixed;
bottom: 385px;
left: 225px;
font-size: 60px;
color: #666666;
}js logic layer:
onShow() {
......
// Set countdown
let iv = setInterval(() => {
let suffix;
switch (this.seconds % 3) {
case 2:
suffix = "...";
break;
case 1:
suffix = "..";
break;
default:
suffix = ".";
break;
}
this.loading = "Data loading" + suffix;
this.seconds--;
if (this.seconds == 0) {
clearInterval(iv);
}
}, 1000);
}The page will jump to the home page of the mall after the animation is played, and use setTimeout() to set the timing jump. Here, when playing the animation, the data required by the home page is preloaded as the page parameter jump, which can speed up the display speed of the mall page and improve the user experience.
onInit() {
// Home page data preloading
// Get advertising pictures
fetch.fetch({
......
});
// Get recommended products
fetch.fetch({
......
});
// Get primary classification
fetch.fetch({
......
});
},
onShow() {
// Set timing jump
let to = setTimeout(() => {
router.replace({
uri: "pages/index/index",
params: {
ad: this.ad,
newGoods: this.newGoods,
hotGoods: this.hotGoods,
types: this.types
}
});
clearTimeout(to);
}, 6000);
......
}4. Animation effect of wechat applet
Finally, write the animation implementation of wechat applet, which also supports the animation properties of CSS3 in wxss:
.happy {
font-size: 50rpx;
color: #e20a0b;
animation-name: an1;
animation-duration: 5s;
animation-delay: 500ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes an1 {
from {
transform: translateX(0px);
opacity: 0.5;
}
to {
transform: translateX(300px);
opacity: 1;
}
}It should be noted that the prompt of the animation name attribute IDE is in double quotation marks and needs to be removed, otherwise it will have no effect.
The animation JS implementation method of wechat applet is very different from that of Hongmeng. The animation is defined and implemented through the API provided by wechat. The interface provides rich methods, which can be consulted in the developer documentation.
Page({
/**
* Initial data of the page
*/
data: {
an2: null
},
onShow: function () {
let an2 = wx.createAnimation({
delay: 500,
duration: 5000,
timingFunction: 'ease-in-out'
});
an2.translate(100, 300).step();
an2.rotate(90).opacity(0.1).step();
this.setData({
an2: an2.export()
})
},
}The basic attributes of animation are the input parameters of the createAnimation() method. The animation key frame is given by a series of method flow operations and ends with step(). Here, the execution time of an animation is the time given by duration. The animation object needs to be exported to data using export() and bound to the animation attribute of the page element.
<view class="happy" animation="{{ an2 }}">
happy new year
</view>