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 @@
transform-origin: 0rpx 0rpx 0rpx;
}
.canvas {
/* .canvas {
width: 750rpx;
height: 1624rpx;
position: fixed;
position: flex;
top: 220rpx;
left: 0rpx;
right: 0rpx;
......@@ -1929,8 +1929,8 @@
margin: auto;
overflow-x: hidden;
position: absolute;
pointer-events: none; */
}
pointer-events: none;
} */
.page-game {
/* width: 750rpx; */
......@@ -1944,3 +1944,44 @@
position: fixed;
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 @@
</scroll-view>
<dialog-modal a:if="{{showdia}}"></dialog-modal>
<view class="page-game" a:if="{{showani=='block'}}">
<canvas id="canvas" class="canvas" onTouchStart="onMouseEvent" onTouchMove="onMouseEvent" onTouchEnd="onMouseEvent" onReady="onCanvasReady">
</canvas>
<view class="page-game">
<!-- <canvas id="canvas" class="canvas" onTouchStart="onMouseEvent" onTouchMove="onMouseEvent" onTouchEnd="onMouseEvent" onReady="onCanvasReady">
</canvas> -->
<image class="animg{{showani?' aniplay':''}}" src={{resList['1e4870aa-4859-4541-a3b8-adc29113a946'].url}} />
</view>
<!-- <ani-modal a:if="{{showani}}"></ani-modal> -->
<rule-modal a:if="{{rule_v}}" onClose="closeRule" ruletxt={{rule}}></rule-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>
......
taobao_mini/client/pages/pageshou_ye/pageshou_ye.js
View file @ e75399ae
......@@ -103,7 +103,7 @@ Page({
],
needattion: true,//是否
showani: "none",
showani: false,
},
onLoad(query) {
......@@ -111,7 +111,6 @@ Page({
if (query) {
commonToast(JSON.stringify(query));
if (query.inviteId) {
app.inviteId = query.inviteId;
}
......@@ -247,6 +246,7 @@ Page({
// });
console.log(123)
try {
var canvas = await new Promise((r) => {
my.createCanvas({
id: 'canvas',
......@@ -255,11 +255,17 @@ Page({
const windowWidth = my.getSystemInfoSync().windowWidth;
const windowHeight = my.getSystemInfoSync().windowHeight;
ccc.width = windowWidth * dpr + dpr;//重新修改会有误差
ccc.height = windowHeight * dpr + dpr;
ccc.height = ccc.width/750*1624;
r(ccc);
},
fail: () => {
r(false)
}
})
})
if(!canvas){
return;
}
console.log(111)
FYGE.initedByCanvas(canvas)
var sysInfo = my.getSystemInfoSync()
......@@ -268,8 +274,10 @@ Page({
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
sysInfo && sysInfo.windowWidth || document.body.clientWidth,
sysInfo && sysInfo.windowHeight || document.body.clientHeight,
// sysInfo && sysInfo.windowWidth || document.body.clientWidth,
// sysInfo && sysInfo.windowHeight || document.body.clientHeight,
sysInfo.windowWidth,
sysInfo.windowWidth/750*1624,
FYGE.RENDERER_TYPE.CANVAS
);
var con = stage.addChild(new FYGE.Container())
......@@ -288,8 +296,9 @@ Page({
//会进TextureCache
// FYGE.createTextureSheet(new FYGE.BaseTexture(image), res)
var a = con.addChild(new FYGE.Lottie(whitedia))
a.play();
this.whateani = con.addChild(new FYGE.Lottie(whitedia));
this.whateani.play(999);
// cardani = a;
//加个lottie
// this.eggBreak = stage.addChild(new FYGE.Lottie(egg_break))
......@@ -311,16 +320,15 @@ Page({
//循环
loop();
function loop() {
console.log(111)
FYGE.Tween.flush()
stage.flush();
FYGE.getRequestAnimationFrame()(loop);
}
} catch (e) {
}
},
onCanvasReady() {
console.log("oncanvasready========>");
this.spark_startEngine();
},
postMessage(netName, data) {
......@@ -339,9 +347,9 @@ Page({
//定制的授权
if (netName == "cardani_over") {
console.log("canvas动画播放完毕=======》");
this.setData({
showani: "none"
});
// this.setData({
// showani: true
// });
}
},
//鼠标事件
......@@ -391,8 +399,13 @@ Page({
console.log("开始播放动画========》");
// commonToast("开始播放=>");
this.setData({
showani: "block"
showani: true
});
if(this.whateani){
FYGE.Tween.removeTweens(this.whateani);
this.whateani.play(1);
}
// this.postMessage("playcardani", null);
},
/**
......@@ -1039,7 +1052,8 @@ Page({
},
closeSp() {
this.setData({
sp_v: false
sp_v: false,
showani:false
});
this.showDialog(false);
},
......@@ -1172,20 +1186,20 @@ Page({
btntype: btntype
});
this.showDialog(true);
try {
// try {
this.onStartAni();
} catch (e) {
// } catch (e) {
}
// }
setTimeout(() => {
this.openSp();
}, 800);
setTimeout(() => {
this.setData({
showani: "none"
});
}, 1000);
}, 860);
// setTimeout(() => {
// this.setData({
// showani: false
// });
// }, 1000);
}
this.changeBtnReady(true);
},
......
taobao_mini/client/pages/pageshou_ye/pageshou_ye.json
View file @ e75399ae
......@@ -7,6 +7,7 @@
"info-modal":"/components/cominfo_dan_chuang/cominfo_dan_chuang",
"sp-modal":"/components/comsui_pian_dan_chuang/comsui_pian_dan_chuang",
"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