Skip to content

N
new_taobao
Commit e75399ae authored by zhangjinzhou's avatar zhangjinzhou
Browse files
Options

动画调整

parent 71fe2327
Show whitespace changes
Inline Side-by-side
Showing with 238 additions and 32 deletions
taobao_mini/client/.kaitian/project-ide.json
View file @ e75399ae
{ {
"enableLegacyRemoteDebug": true "enableLegacyRemoteDebug": false
} }
\ No newline at end of file
taobao_mini/client/components/comani_card/comp9.acss 0 → 100644
View file @ e75399ae
.cai_dan_page {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
.cai_dan_page .cai_dan_canvas {
width:100%;
height:100vh;
flex: 1;
display: flex;
flex-direction: column;
/* background: #f5cccd; */
}
.cai_dan_page .cai_dan_box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.cai_dan_page .cai_dan_page_title {
font-family: SourceHanSansSC-Bold;
font-size: 48rpx;
font-weight: normal;
font-style: italic;
font-stretch: normal;
letter-spacing: 0;
color: #fff;
position: relative;
top: -80rpx;
}
.cai_dan_page .cai_dan_page_content {
position: relative;
width: 100%;
height: 600rpx;
}
.cai_dan_page .cai_dan_page_close {
width: 48rpx;
height: 48rpx;
padding: 20rpx;
box-sizing: border-box;
}
\ No newline at end of file
taobao_mini/client/components/comani_card/comp9.axml 0 → 100644
View file @ e75399ae
<view class="cai_dan_page">
<canvas id="canvas" type="2d" class="canvas cai_dan_canvas" disable-scroll="true" onReady="onCanvasReady"></canvas>
</view>
\ No newline at end of file
taobao_mini/client/components/comani_card/comp9.js 0 → 100644
View file @ e75399ae
import * as FYGE from "fyge-tbmini";
import { whitedia } from '/resconfig/js/whitedia';
import resList from '/resconfig/resList';
const app = getApp();
const { tbcc } = app;
const { commonToast, getAuthUserInfo, navigateToOutside, getSystemInfo, getServerTime } = tbcc.tb;
let flag = false
Component({
data: {
resList
},
props: {
onClose: () => { },
onClick: () => { },
onEnd: () => { }
},
didMount() {
flag = false
},
methods: {
// handleClick() {
// if (!flag) {
// flag = true
// this.eggBreak.play(1, this.props.onEnd);
// this.props.onClick()
// }
// },
handleClose() {
this.props.onClose()
},
onCanvasReady() {
console.log('onCanvasReady')
commonToast("onCanvasReady");
this.createMain();
},
async createMain() {
console.log(123)
commonToast("createMain");
if (!this.canvas) {
var canvas = await new Promise((r) => {
commonToast("请问请问" + !!my.createCanvas);
my.createCanvas({
id: 'canvas',
success: (ccc) => {
commonToast("onCanvasReady44");
const dpr = my.getSystemInfoSync().pixelRatio
const windowWidth = my.getSystemInfoSync().windowWidth;
const windowHeight = my.getSystemInfoSync().windowHeight;
ccc.width = windowWidth * dpr + dpr;//重新修改会有误差
ccc.height = windowHeight * dpr + dpr;
commonToast("onCanvasReady55");
r(ccc);
}
})
})
commonToast("onCanvasReady66");
FYGE.initedByCanvas(canvas)
var sysInfo = my.getSystemInfoSync()
//建舞台
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
FYGE.RENDERER_TYPE.CANVAS
);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, () => {
var a = stage.addChild(new FYGE.Lottie(whitedia))
a.play(1);
}, this);
//循环
loop();
function loop() {
FYGE.Tween.flush()
stage.flush();
FYGE.getRequestAnimationFrame()(loop);
}
this.canvas = canvas;
}else{
commonToast("存在canvas");
}
},
},
});
taobao_mini/client/components/comani_card/comp9.json 0 → 100644
View file @ e75399ae
{
"component": true
}
\ No newline at end of file
taobao_mini/client/pages/pageshou_ye/pageshou_ye.acss
View file @ e75399ae
...@@ -1911,10 +1911,10 @@ ...@@ -1911,10 +1911,10 @@
transform-origin: 0rpx 0rpx 0rpx; transform-origin: 0rpx 0rpx 0rpx;
} }
.canvas { /* .canvas {
width: 750rpx; width: 750rpx;
height: 1624rpx; height: 1624rpx;
position: fixed; position: flex;
top: 220rpx; top: 220rpx;
left: 0rpx; left: 0rpx;
right: 0rpx; right: 0rpx;
...@@ -1929,8 +1929,8 @@ ...@@ -1929,8 +1929,8 @@
margin: auto; margin: auto;
overflow-x: hidden; overflow-x: hidden;
position: absolute; position: absolute;
pointer-events: none; */ pointer-events: none;
} } */
.page-game { .page-game {
/* width: 750rpx; */ /* width: 750rpx; */
...@@ -1944,3 +1944,44 @@ ...@@ -1944,3 +1944,44 @@
position: fixed; position: fixed;
pointer-events: none; pointer-events: none;
} }
.animg {
top: 50%;
left: 50%;
margin-left: -287rpx;
margin-top: 100rpx;
width: 574rpx;
height: 401rpx;
position: fixed;
transform-origin: 50% 50%;
display: none;
}
.aniplay {
display: block;
animation: modalFlyCard 0.86s forwards;
}
@keyframes modalFlyCard {
from {
transform: scale(0);
margin-top: 100rpx;
opacity: 0;
}
35% {
margin-top: -275rpx;
}
58% {
transform: scale(1);
opacity: 1;
}
77% {
margin-top: -186rpx;
}
88% {
margin-top: -195rpx;
}
to {
margin-top: -186rpx;
}
}
\ No newline at end of file
taobao_mini/client/pages/pageshou_ye/pageshou_ye.axml
View file @ e75399ae
...@@ -205,10 +205,12 @@ ...@@ -205,10 +205,12 @@
</scroll-view> </scroll-view>
<dialog-modal a:if="{{showdia}}"></dialog-modal> <dialog-modal a:if="{{showdia}}"></dialog-modal>
<view class="page-game" a:if="{{showani=='block'}}"> <view class="page-game">
<canvas id="canvas" class="canvas" onTouchStart="onMouseEvent" onTouchMove="onMouseEvent" onTouchEnd="onMouseEvent" onReady="onCanvasReady"> <!-- <canvas id="canvas" class="canvas" onTouchStart="onMouseEvent" onTouchMove="onMouseEvent" onTouchEnd="onMouseEvent" onReady="onCanvasReady">
</canvas> </canvas> -->
<image class="animg{{showani?' aniplay':''}}" src={{resList['1e4870aa-4859-4541-a3b8-adc29113a946'].url}} />
</view> </view>
<!-- <ani-modal a:if="{{showani}}"></ani-modal> -->
<rule-modal a:if="{{rule_v}}" onClose="closeRule" ruletxt={{rule}}></rule-modal> <rule-modal a:if="{{rule_v}}" onClose="closeRule" ruletxt={{rule}}></rule-modal>
<rank-modal a:if="{{rank_v}}" onClose="closeRank"></rank-modal> <rank-modal a:if="{{rank_v}}" onClose="closeRank"></rank-modal>
<attion-modal a:if="{{attion_v}}" onClose="closeAttion" onOpenJlGift="onOpenJlGift" prizeimg="{{prizeimg}}" prizename="{{prizename}}" prizetype="{{prizetype}}" btntype="{{prizebtntype}}" attionfrom="{{attionfrom}}"></attion-modal> <attion-modal a:if="{{attion_v}}" onClose="closeAttion" onOpenJlGift="onOpenJlGift" prizeimg="{{prizeimg}}" prizename="{{prizename}}" prizetype="{{prizetype}}" btntype="{{prizebtntype}}" attionfrom="{{attionfrom}}"></attion-modal>
......
taobao_mini/client/pages/pageshou_ye/pageshou_ye.js
View file @ e75399ae
...@@ -103,7 +103,7 @@ Page({ ...@@ -103,7 +103,7 @@ Page({
], ],
needattion: true,//是否 needattion: true,//是否
showani: "none", showani: false,
}, },
onLoad(query) { onLoad(query) {
...@@ -111,7 +111,6 @@ Page({ ...@@ -111,7 +111,6 @@ Page({
if (query) { if (query) {
commonToast(JSON.stringify(query));
if (query.inviteId) { if (query.inviteId) {
app.inviteId = query.inviteId; app.inviteId = query.inviteId;
} }
...@@ -247,6 +246,7 @@ Page({ ...@@ -247,6 +246,7 @@ Page({
// }); // });
console.log(123) console.log(123)
try { try {
var canvas = await new Promise((r) => { var canvas = await new Promise((r) => {
my.createCanvas({ my.createCanvas({
id: 'canvas', id: 'canvas',
...@@ -255,11 +255,17 @@ Page({ ...@@ -255,11 +255,17 @@ Page({
const windowWidth = my.getSystemInfoSync().windowWidth; const windowWidth = my.getSystemInfoSync().windowWidth;
const windowHeight = my.getSystemInfoSync().windowHeight; const windowHeight = my.getSystemInfoSync().windowHeight;
ccc.width = windowWidth * dpr + dpr;//重新修改会有误差 ccc.width = windowWidth * dpr + dpr;//重新修改会有误差
ccc.height = windowHeight * dpr + dpr; ccc.height = ccc.width/750*1624;
r(ccc); r(ccc);
},
fail: () => {
r(false)
} }
}) })
}) })
if(!canvas){
return;
}
console.log(111) console.log(111)
FYGE.initedByCanvas(canvas) FYGE.initedByCanvas(canvas)
var sysInfo = my.getSystemInfoSync() var sysInfo = my.getSystemInfoSync()
...@@ -268,8 +274,10 @@ Page({ ...@@ -268,8 +274,10 @@ Page({
canvas, canvas,
750,//设计宽度，按设计搞给的就行 750,//设计宽度，按设计搞给的就行
1624,//设计高度 1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth, // sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight, // sysInfo && sysInfo.windowHeight || document.body.clientHeight,
sysInfo.windowWidth,
sysInfo.windowWidth/750*1624,
FYGE.RENDERER_TYPE.CANVAS FYGE.RENDERER_TYPE.CANVAS
); );
var con = stage.addChild(new FYGE.Container()) var con = stage.addChild(new FYGE.Container())
...@@ -288,8 +296,9 @@ Page({ ...@@ -288,8 +296,9 @@ Page({
//会进TextureCache //会进TextureCache
// FYGE.createTextureSheet(new FYGE.BaseTexture(image), res) // FYGE.createTextureSheet(new FYGE.BaseTexture(image), res)
var a = con.addChild(new FYGE.Lottie(whitedia)) this.whateani = con.addChild(new FYGE.Lottie(whitedia));
a.play();
this.whateani.play(999);
// cardani = a; // cardani = a;
//加个lottie //加个lottie
// this.eggBreak = stage.addChild(new FYGE.Lottie(egg_break)) // this.eggBreak = stage.addChild(new FYGE.Lottie(egg_break))
...@@ -311,16 +320,15 @@ Page({ ...@@ -311,16 +320,15 @@ Page({
//循环 //循环
loop(); loop();
function loop() { function loop() {
console.log(111)
FYGE.Tween.flush() FYGE.Tween.flush()
stage.flush(); stage.flush();
FYGE.getRequestAnimationFrame()(loop); FYGE.getRequestAnimationFrame()(loop);
} }
} catch (e) { } catch (e) {
} }
}, },
onCanvasReady() { onCanvasReady() {
console.log("oncanvasready========>");
this.spark_startEngine(); this.spark_startEngine();
}, },
postMessage(netName, data) { postMessage(netName, data) {
...@@ -339,9 +347,9 @@ Page({ ...@@ -339,9 +347,9 @@ Page({
//定制的授权 //定制的授权
if (netName == "cardani_over") { if (netName == "cardani_over") {
console.log("canvas动画播放完毕=======》"); console.log("canvas动画播放完毕=======》");
this.setData({ // this.setData({
showani: "none" // showani: true
}); // });
} }
}, },
//鼠标事件 //鼠标事件
...@@ -391,8 +399,13 @@ Page({ ...@@ -391,8 +399,13 @@ Page({
console.log("开始播放动画========》"); console.log("开始播放动画========》");
// commonToast("开始播放=>"); // commonToast("开始播放=>");
this.setData({ this.setData({
showani: "block" showani: true
}); });
if(this.whateani){
FYGE.Tween.removeTweens(this.whateani);
this.whateani.play(1);
}
// this.postMessage("playcardani", null); // this.postMessage("playcardani", null);
}, },
/** /**
...@@ -1039,7 +1052,8 @@ Page({ ...@@ -1039,7 +1052,8 @@ Page({
}, },
closeSp() { closeSp() {
this.setData({ this.setData({
sp_v: false sp_v: false,
showani:false
}); });
this.showDialog(false); this.showDialog(false);
}, },
...@@ -1172,20 +1186,20 @@ Page({ ...@@ -1172,20 +1186,20 @@ Page({
btntype: btntype btntype: btntype
}); });
this.showDialog(true); this.showDialog(true);
try { // try {
this.onStartAni(); this.onStartAni();
} catch (e) { // } catch (e) {
} // }
setTimeout(() => { setTimeout(() => {
this.openSp(); this.openSp();
}, 800); }, 860);
setTimeout(() => { // setTimeout(() => {
this.setData({ // this.setData({
showani: "none" // showani: false
}); // });
}, 1000); // }, 1000);
} }
this.changeBtnReady(true); this.changeBtnReady(true);
}, },
......
taobao_mini/client/pages/pageshou_ye/pageshou_ye.json
View file @ e75399ae
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"info-modal":"/components/cominfo_dan_chuang/cominfo_dan_chuang", "info-modal":"/components/cominfo_dan_chuang/cominfo_dan_chuang",
"sp-modal":"/components/comsui_pian_dan_chuang/comsui_pian_dan_chuang", "sp-modal":"/components/comsui_pian_dan_chuang/comsui_pian_dan_chuang",
"gift-modal":"/components/comxin_ren_li_bao/comxin_ren_li_bao", "gift-modal":"/components/comxin_ren_li_bao/comxin_ren_li_bao",
"choose-modal":"/components/comxuan_ze_dan_chuang/comxuan_ze_dan_chuang" "choose-modal":"/components/comxuan_ze_dan_chuang/comxuan_ze_dan_chuang",
"ani-modal":"/components/comani_card/comp9"
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment