Skip to content

html / zhufuyuCommon

Go to a project
Commit df2b14a5 by mamingqun
Options

添加帧动画示例

parent 8e88fbd2
Showing with 1037 additions and 10 deletions
.env.prod
VUE_APP_BUILD_TYPE = 'production'
\ No newline at end of file
VUE_APP_BUILD_TYPE = 'production'
NODE_ENV='production'
\ No newline at end of file
.env.stage
VUE_APP_BUILD_TYPE = 'test'
\ No newline at end of file
VUE_APP_BUILD_TYPE = 'test'
NODE_ENV='production'
\ No newline at end of file
public/index.html
......@@ -10,6 +10,8 @@
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!-- 预加载 -->
<script src="./libs/preloadjs.min.js"></script>
<!-- jquery -->
<script src="https://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<noscript>
......
public/load/keyframe.js 0 → 100644
function t(t, s, o, e) {
if (!t || !o) throw new Error('el和imgs是必填参数')
if (s !== 'array' && s !== 'sprite') {
throw new Error('只支持"array"和"sprite"模式')
}
(this.el = t), (this.mode = s), (this.imgs = o), (this.imgsLen = null), (this.canvas = null), (this.ctx = null), (this.timer = null), (this.state =
'stop'), (this.infinite = 1e9), (this.ispause = !1), (this.plusNum = 0), (this.plusCount = 0), (this.count = 0)
var n = {
cover: 0,
fps: 24,
loop: 'infinite',
ratio: 2
};
(this.options = e || n), (this.options.cover =
e.cover || n.cover), (this.options.fps =
e.fps || n.fps), (this.options.loop =
e.loop || n.loop), (this.options.ratio =
e.ratio ||
n.ratio), (this.recordFrom = 0), (this.recordTo = null), (this.recordInf = this.options.loop), (function (
t
) {
(function (t) {
var i = document.createElement('canvas');
(i.width = 2 * t.options.width || t.el.clientWidth), (i.height =
2 * t.options.height || t.el.clientHeight), (i.style.display =
'block'), (i.style.width = '100%'), (i.style.height =
'100%'), (t.ctx = i.getContext('2d')), t.el.appendChild(
i
), (t.canvas = i)
})(t), t.mode === 'array' ?
(t.imgsLen = t.imgs.length) :
t.mode === 'sprite' &&
(t.imgsLen = Math.round(
2 * t.imgs.width / (t.canvas.width * t.options.ratio)
));
(t.recordTo = t.imgsLen - 1), (function (t) {
i(t, t.options.cover)
})(t)
})(this)
}
function i(t, i) {
if (
(t.ctx.clearRect(0, 0, t.canvas.width, t.canvas.height), t.mode ===
'array')
) {
t.imgs[i].width !== 0 &&
t.ctx.drawImage(t.imgs[i], 0, 0, t.canvas.width, t.canvas.height);
} else {
if (t.mode !== 'sprite') throw new Error('没有匹配的模式')
var s = t.imgs.width / t.imgsLen
t.ctx.drawImage(
t.imgs,
s * i,
0,
s,
t.imgs.height,
0,
0,
t.canvas.width,
t.canvas.height
)
}
}
(t.prototype = {
constructor: t,
goto: function (t) {
i(this, t), (this.count = t)
},
next: function () {
var t = (this.count + 1 + this.imgsLen - 1) % (this.imgsLen - 1)
this.goto(t)
},
prev: function () {
var t = (this.count - 1 + this.imgsLen - 1) % (this.imgsLen - 1)
this.goto(t)
},
fromTo: function (t, i, s, o) {
var e = this
clearInterval(this.timer)
var n = t,
r = function () {
if (!e.ispause) {
return e.plusNum <= e.plusCount ?
(clearInterval(
e.timer
), (e.timer = null), (e.plusNum = 0), (e.plusCount = 0), (e.state =
'stop'), void(o && o())) :
(n > i && (n = t), e.goto(n), n++, void e.plusCount++)
}
};
(this.plusCount = 0), (this.state = 'play'), (s = s && s !== 'infinite' ?
s :
this.infinite), (this.plusNum =
(i - t + 1) *
s), (this.ispause = !1), (this.recordFrom = t), (this.recordTo = i), (this.recordInf = s), r(), (this.timer = setInterval(
r,
1e3 / this.options.fps
))
},
toFrom: function (t, i, s, o) {
var e = this
clearInterval(this.timer)
var n = t,
r = function () {
if (!e.ispause) {
return e.plusNum <= e.plusCount ?
(clearInterval(
e.timer
), (e.timer = null), (e.plusNum = 0), (e.plusCount = 0), (e.state =
'stop'), void(o && o())) :
(n < i && (n = t), e.goto(n), n--, void e.plusCount++)
}
};
(this.plusCount = 0), (this.state = 'play'), (s = s && s !== 'infinite' ?
s :
this.infinite), (this.plusNum =
(t - i + 1) *
s), (this.ispause = !1), (this.recordFrom = i), (this.recordTo = t), (this.recordInf = s), r(), (this.timer = setInterval(
r,
1e3 / this.options.fps
))
},
repeatplay: function (t, i, s, o) {
var e = this,
n = 0
s = s && s !== 'infinite' ? s : this.infinite
var r = function () {
++n === s ? o && o() : e.fromTo(t, i, 2, o)
};
this.fromTo(t, i, 1, function () {
e.toFrom(i, t, 1, r)
})
},
from: function (t, i, s) {
var o = this.imgsLen - 1
this.fromTo(t, o, i, s)
},
to: function (t, i, s) {
this.fromTo(0, t, i, s)
},
pause: function () {
(this.ispause = !0), (this.state = 'stop')
},
stop: function () {
clearInterval(this.timer), (this.state =
'stop'), (this.plusNum = 0), (this.plusCount = 0), (this.ispause = !1), (this.recordFrom = 0), (this.recordTo =
this.imgsLen - 1), (this.recordInf = this.options.loop), i(
this,
this.options.cover
)
},
play: function (t) {
this.state !== 'play' &&
(this.ispause ?
(this.ispause = !1) :
this.fromTo(this.recordFrom, this.recordTo, this.recordInf, t))
},
destroy: function () {
for (var t in (clearInterval(
this.timer
), (this.timer = null), (this.ctx = null), this.canvas.remove(), (this.canvas = null), this)) {
delete this[t]
}
}
})
typeof exports !== 'undefined' && (exports.CanvasKeyFrames = t)
typeof window !== 'undefined' && (window.CanvasKeyFrames = t)
export default {
CanvasKeyFrames: t
}
\ No newline at end of file
public/load/load.css 0 → 100644
#loading {
position: fixed;
top: 0%;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 99999;
}
#loading .loading .bg-bg {
position: absolute;
top: 0%;
left: 0;
right: 0;
bottom: 0;
width: 7.5rem;
height: auto;
z-index: 1;
background: url(../../static/img/index-tu-01.jpg) no-repeat;
background-size: 100% 100%;
}
#loading .jiazai_zhuan {
width: 5.39rem;
height: 5.39rem;
position: absolute;
top: 22%;
left: 0.82rem;
bottom: 0;
right: 0;
z-index: 2;
}
#loading .jiazai {
position: absolute;
top: 0rem;
left: 0rem;
width: 5.76rem;
height: 5.76rem;
background: url(../../static/img/loading_03.png) no-repeat;
background-size: 100% 100%;
animation: fangda1 1.5s 0s forwards;
}
#loading .jiazai_logo {
width: 4.39rem;
height: 4.39rem;
position: absolute;
top: 0.2rem;
left: 0.2rem;
background: url(../../static/img/loading_04.png) no-repeat;
background-size: 100% 100%;
animation: SCALE 3s infinite;
}
#loading .yun_left {
position: absolute;
top: 1.3rem;
right: 0rem;
width: 1.68rem;
height: 0.48rem;
background: url(../../static/img/loading_01.png) no-repeat;
background-size: 100% 100%;
/* animation:pingyi1 1.5s 1.5s forwards;*/
}
#loading .yun_right {
position: absolute;
top: 3.25rem;
left: 0rem;
width: 1.69rem;
height: 0.75rem;
background: url(../../static/img/loading_02.png) no-repeat;
background-size: 100% 100%;
/* animation:pingyi2 1.5s 1.5s forwards;*/
}
#animation .jumps {
position: fixed;
bottom: 10vh;
right: .1rem;
margin: 0 auto;
text-align: center;
color: #eecba4;
width: 2.91rem;
font-size: 26px;
z-index: 99999;
height: 0.7rem;
background: url('../../static/img/jumps.png') center no-repeat;
background-size: contain;
animation: SCALE 2s infinite ease-in-out;
display: none;
}
@keyframes SCALE {
0% {
transform: scale(0.8)
}
50% {
transform: scale(1)
}
100% {
transform: scale(0.8)
}
}
#loading .progress {
position: absolute;
width: 6.78rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 26px;
color: #eecba4;
}
#animation {
width: 640px;
height: 1030px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow: hidden;
}
#animation>img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
width: 100%;
height: 100%;
z-index: 10000000000;
}
#animation>canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
z-index: 9999;
}
#introduce_pic {
top: 65px;
z-index: 20000;
width: 100%;
position: absolute;
overflow: hidden;
-ms-touch-action: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent text resize on orientation change,useful for web-apps */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
@keyframes fangda1 {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 1;
transform: scale(1);
}
}
\ No newline at end of file
public/load/load.js 0 → 100644
var keyFramesURL = 'https://wanda-h5.bdideal.com/blessing/keyframes-imgs/'
var resize = function () {
var $animation = $('#animation')
var $height = $(window).height()
var $width = $(window).width()
$animation.css({ width: $width, height: $height, left: 0 })
}
function loadStop () {
window.keyFrames2 && window.keyFrames2.destroy()
$('#loading').remove()
$('.loading').hide()
$('body').css('overflow', 'auto')
$('.logo_30nian').show()
$('#chakan2').show()
$('#animation').remove()
}
function preloadImages (n) {
function e (e) {
s({
event: e,
files: n,
loadeds: i
})
}
function o (o) {
var s = new Image();
(s.onload = function () {
i.push(o), r({ files: n, image: s, loadeds: i, path: o }), i.length <
n.length || t({ files: n, loadeds: i })
}), (s.onerror = e), (s.src = o)
}
for (
var r,
t,
s,
i = [],
l = {
files: n,
loadeds: i,
onprogress: function (n) {
return (r = n), this
},
onload: function (n) {
return (t = n), this
},
onerror: function (n) {
return (s = n), this
}
},
a = 0,
u = n.length;
u > a;
a++
) {
o(n[a])
}
return l
}
$(function () {
$(window).resize(resize)
if (location.href.indexOf('#/fenxiang') == -1) {
console.log('loading....')
loadingInit()
resize()
} else {
loadStop()
}
})
// fff
function keyFrames (imgArr) {
var total = 128
var PRELOADARR = []
var count = 0
for (var i = 0; i <= total; i++) {
(function (i) {
var idxstr = '00000' + i
idxstr = idxstr.substring(idxstr.length - 6, idxstr.length)
// 修改 loading 页面
var src = keyFramesURL + idxstr + '.jpg'
var img = new Image()
img.src = src
img.onload = function () {
count++
PRELOADARR[i] = img
if (count == total) {
keyFramespaly(PRELOADARR)
}
}
})(i)
}
function keyFramespaly (PRELOADARR) {
window.keyFrames2 = new CanvasKeyFrames(
document.querySelector('#animation'),
'array',
PRELOADARR,
{
loop: 0,
fps: 12,
width: window.innerWidth,
height: window.innerHeight
}
)
keyFrames2.fromTo(0, total, 1, function () {
loadStop()
})
}
}
var loadnum = 0
// fff初始动画dom实例化
function loadingInit () {
var body = $('body') // #endregion
var str = `<div id="loading" style="display: none">
<div class="bg-bg"></div>
<div class="dibu"></div>
<div class="loading-circle">
<p class="txt"></p>
<p class="progress"></p>
<p class="txt2"></p>
</div>
</div>
<div id="animation">
<div class="jumps"></div>
</div>`
body.append(str)
$('#animation .jumps').click(function (params) {
console.log(1234567)
loadStop()
})
$('.loading').hide()
$('#loading').show()
$('.logo_30nian').hide()
var PRELOADARR = []
for (var i = 0; i <= 128; i++) {
var idxstr = '00000' + i
idxstr = idxstr.substring(idxstr.length - 6, idxstr.length)
var src = keyFramesURL + idxstr + '.jpg'
PRELOADARR.push(src)
}
var loadingpro = $('#loading .progress')
loadnum = 0
preloadImages(PRELOADARR)
.onprogress(function (data) {
$('#loading').show()
var loaded = data.loadeds.length
var all = data.files.length
var progress = parseInt(100 * loaded / all, 10)
loadingpro.html(progress + '%')
loadnum = progress
})
.onload(function (data) {
$('#loading').hide()
keyFrames()
setTimeout(function () {
$('#animation .jumps').show()
}, 1500)
console.log('Done.')
})
.onerror(function (data) {
console.error('ERROR!', data.event)
})
}
src/App.vue
......@@ -81,4 +81,9 @@ export default {
ul,li {
list-style: none;
}
html,body{
// background: rgba(0, 0, 0, 0.2);
height: 100%;
}
</style>
src/assets/fonts/font.css
......@@ -4,6 +4,6 @@
}
@font-face{
font-family: 'gangbi';
font-family: 'gangbi1';
src: url('文鼎粗钢笔行楷.ttf');
}
src/assets/lib/keyframe.js 0 → 100644
function t(t, s, o, e) {
if (!t || !o) throw new Error('el和imgs是必填参数')
if (s !== 'array' && s !== 'sprite') {
throw new Error('只支持"array"和"sprite"模式')
}
(this.el = t), (this.mode = s), (this.imgs = o), (this.imgsLen = null), (this.canvas = null), (this.ctx = null), (this.timer = null), (this.state =
'stop'), (this.infinite = 1e9), (this.ispause = !1), (this.plusNum = 0), (this.plusCount = 0), (this.count = 0)
var n = {
cover: 0,
fps: 24,
loop: 'infinite',
ratio: 2
};
(this.options = e || n), (this.options.cover =
e.cover || n.cover), (this.options.fps =
e.fps || n.fps), (this.options.loop =
e.loop || n.loop), (this.options.ratio =
e.ratio ||
n.ratio), (this.recordFrom = 0), (this.recordTo = null), (this.recordInf = this.options.loop), (function (
t
) {
(function (t) {
var i = document.createElement('canvas');
(i.width = 2 * t.options.width || t.el.clientWidth), (i.height =
2 * t.options.height || t.el.clientHeight), (i.style.display =
'block'), (i.style.width = '100%'), (i.style.height =
'100%'), (t.ctx = i.getContext('2d')), t.el.appendChild(
i
), (t.canvas = i)
})(t), t.mode === 'array' ?
(t.imgsLen = t.imgs.length) :
t.mode === 'sprite' &&
(t.imgsLen = Math.round(
2 * t.imgs.width / (t.canvas.width * t.options.ratio)
));
(t.recordTo = t.imgsLen - 1), (function (t) {
i(t, t.options.cover)
})(t)
})(this)
}
function i(t, i) {
if (
(t.ctx.clearRect(0, 0, t.canvas.width, t.canvas.height), t.mode ===
'array')
) {
t.imgs[i].width !== 0 &&
t.ctx.drawImage(t.imgs[i], 0, 0, t.canvas.width, t.canvas.height);
} else {
if (t.mode !== 'sprite') throw new Error('没有匹配的模式')
var s = t.imgs.width / t.imgsLen
t.ctx.drawImage(
t.imgs,
s * i,
0,
s,
t.imgs.height,
0,
0,
t.canvas.width,
t.canvas.height
)
}
}
(t.prototype = {
constructor: t,
goto: function (t) {
i(this, t), (this.count = t)
},
next: function () {
var t = (this.count + 1 + this.imgsLen - 1) % (this.imgsLen - 1)
this.goto(t)
},
prev: function () {
var t = (this.count - 1 + this.imgsLen - 1) % (this.imgsLen - 1)
this.goto(t)
},
fromTo: function (t, i, s, o) {
var e = this
clearInterval(this.timer)
var n = t,
r = function () {
if (!e.ispause) {
return e.plusNum <= e.plusCount ?
(clearInterval(
e.timer
), (e.timer = null), (e.plusNum = 0), (e.plusCount = 0), (e.state =
'stop'), void(o && o())) :
(n > i && (n = t), e.goto(n), n++, void e.plusCount++)
}
};
(this.plusCount = 0), (this.state = 'play'), (s = s && s !== 'infinite' ?
s :
this.infinite), (this.plusNum =
(i - t + 1) *
s), (this.ispause = !1), (this.recordFrom = t), (this.recordTo = i), (this.recordInf = s), r(), (this.timer = setInterval(
r,
1e3 / this.options.fps
))
},
toFrom: function (t, i, s, o) {
var e = this
clearInterval(this.timer)
var n = t,
r = function () {
if (!e.ispause) {
return e.plusNum <= e.plusCount ?
(clearInterval(
e.timer
), (e.timer = null), (e.plusNum = 0), (e.plusCount = 0), (e.state =
'stop'), void(o && o())) :
(n < i && (n = t), e.goto(n), n--, void e.plusCount++)
}
};
(this.plusCount = 0), (this.state = 'play'), (s = s && s !== 'infinite' ?
s :
this.infinite), (this.plusNum =
(t - i + 1) *
s), (this.ispause = !1), (this.recordFrom = i), (this.recordTo = t), (this.recordInf = s), r(), (this.timer = setInterval(
r,
1e3 / this.options.fps
))
},
repeatplay: function (t, i, s, o) {
var e = this,
n = 0
s = s && s !== 'infinite' ? s : this.infinite
var r = function () {
++n === s ? o && o() : e.fromTo(t, i, 2, o)
};
this.fromTo(t, i, 1, function () {
e.toFrom(i, t, 1, r)
})
},
from: function (t, i, s) {
var o = this.imgsLen - 1
this.fromTo(t, o, i, s)
},
to: function (t, i, s) {
this.fromTo(0, t, i, s)
},
pause: function () {
(this.ispause = !0), (this.state = 'stop')
},
stop: function () {
clearInterval(this.timer), (this.state =
'stop'), (this.plusNum = 0), (this.plusCount = 0), (this.ispause = !1), (this.recordFrom = 0), (this.recordTo =
this.imgsLen - 1), (this.recordInf = this.options.loop), i(
this,
this.options.cover
)
},
play: function (t) {
this.state !== 'play' &&
(this.ispause ?
(this.ispause = !1) :
this.fromTo(this.recordFrom, this.recordTo, this.recordInf, t))
},
destroy: function () {
for (var t in (clearInterval(
this.timer
), (this.timer = null), (this.ctx = null), this.canvas.remove(), (this.canvas = null), this)) {
delete this[t]
}
}
})
typeof exports !== 'undefined' && (exports.CanvasKeyFrames = t)
typeof window !== 'undefined' && (window.CanvasKeyFrames = t)
let CanvasKeyFrames = t
export {
CanvasKeyFrames
}
\ No newline at end of file
src/example/keyFrame.vue 0 → 100644
<template>
<div>
<h5>帧动画</h5>
<button @click="startAnimation">开始帧动画</button>
<div v-if="animation">
<div id="loading" ref="loading">
<div class="loading-circle">
<p class="progress">{{loadnum}}%</p>
</div>
</div>
<div id="animation" ref="animationBox">
<div class="jumps" ref="jumps" @click="loadStop"></div>
</div>
</div>
</div>
</template>
<script>
import { CanvasKeyFrames } from '@/assets/lib/keyframe';
export default {
data() {
return {
keyFramesURL: 'https://wanda-h5.bdideal.com/blessing/keyframes-imgs/',
animation: false,
loadnum: 0,
totalPictureNum: 128
}
},
mounted() {
},
methods: {
startAnimation() {
this.loadingInit()
},
loadingInit() {
var _this = this
this.animation = true
this.$nextTick(() => {
this.resize()
var PRELOADARR = []
for (var i = 0; i <= _this.totalPictureNum; i++) {
var idxstr = '00000' + i
idxstr = idxstr.substring(idxstr.length - 6, idxstr.length)
var src = _this.keyFramesURL + idxstr + '.jpg'
PRELOADARR.push(src)
}
var loadingpro = $('#loading .progress')
_this.loadnum = 0
_this.preloadImages(PRELOADARR)
.onprogress(function (data) {
var loaded = data.loadeds.length
var all = data.files.length
var progress = parseInt(100 * loaded / all, 10)
_this.loadnum = progress
})
.onload(function (data) {
setTimeout(() => {
_this.$refs.loading.style.display = ' none'
}, 2000);
_this.keyFrames()
setTimeout(function () {
_this.$refs.jumps.style.display = 'block'
}, 2000)
console.log('Done.')
})
.onerror(function (data) {
console.error('ERROR!', data.event)
})
})
},
keyFrames(imgArr) {
let _this = this
var PRELOADARR = []
var count = 0
for (var i = 0; i <= _this.totalPictureNum; i++) {
(function (i) {
var idxstr = '00000' + i
idxstr = idxstr.substring(idxstr.length - 6, idxstr.length)
// 修改 loading 页面
var src = _this.keyFramesURL + idxstr + '.jpg'
var img = new Image()
img.src = src
img.onload = function () {
count++
PRELOADARR[i] = img
if (count == _this.totalPictureNum) {
keyFramespaly(PRELOADARR)
}
}
})(i)
}
function keyFramespaly(PRELOADARR) {
window.keyFrames2 = new CanvasKeyFrames(
document.querySelector('#animation'),
'array',
PRELOADARR,
{
loop: 0,
fps: 12,
width: window.innerWidth,
height: window.innerHeight
}
)
keyFrames2.fromTo(0, _this.totalPictureNum, 1, function () {
_this.loadStop()
})
}
},
preloadImages(n) {
function e(e) {
s({
event: e,
files: n,
loadeds: i
})
}
function o(o) {
var s = new Image();
(s.onload = function () {
i.push(o), r({ files: n, image: s, loadeds: i, path: o }), i.length <
n.length || t({ files: n, loadeds: i })
}), (s.onerror = e), (s.src = o)
}
for (
var r,
t,
s,
i = [],
l = {
files: n,
loadeds: i,
onprogress: function (n) {
return (r = n), this
},
onload: function (n) {
return (t = n), this
},
onerror: function (n) {
return (s = n), this
}
},
a = 0,
u = n.length;
u > a;
a++
) {
o(n[a])
}
return l
},
loadStop() {
this.animation = false
this.loadnum = 0
},
resize() {
var $height = document.body.clientHeight
var $width = document.body.clientWidth
this.$refs.animationBox.style.height = $height + 'px'
this.$refs.animationBox.style.width = $width + 'px'
}
}
}
</script>
<style lang="less" scoped>
#loading {
position: fixed;
top: 0%;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 99999;
background: url("../assets/img/index-tu-01.jpg") no-repeat;
background-size: 100% 100%;
}
#animation .jumps {
position: fixed;
bottom: 10vh;
right: 0.1rem;
margin: 0 auto;
text-align: center;
color: #eecba4;
width: 2.91rem;
font-size: 26px;
z-index: 99999;
height: 0.7rem;
background: url("../assets/img/jumps.png") center no-repeat;
background-size: contain;
animation: SCALE 2s infinite ease-in-out;
display: none;
}
@keyframes SCALE {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.8);
}
}
#loading .progress {
position: absolute;
width: 6.78rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 26px;
color: #eecba4;
}
#animation {
width: 640px;
height: 1030px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
overflow: hidden;
}
#animation > img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
opacity: 0;
width: 100%;
height: 100%;
z-index: 10000000000;
}
#animation > canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
z-index: 9999;
}
#introduce_pic {
top: 65px;
z-index: 20000;
width: 100%;
position: absolute;
overflow: hidden;
-ms-touch-action: none;
user-select: none;
/* Prevent text resize on orientation change,useful for web-apps */
text-size-adjust: none;
}
@keyframes fangda1 {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
\ No newline at end of file
src/router.js
......@@ -5,6 +5,7 @@ import Loading from './example/Loading.vue'
import User from './views/User.vue'
import Detail from './views/Detail.vue'
import Index from './views/Index.vue'
import keyFrame from './example/keyFrame.vue'
Vue.use(Router)
......@@ -34,6 +35,11 @@ export default new Router({
name: 'index',
component: Index
},
{
path: '/keyframe',
name: 'keyframe',
component: keyFrame
},
// {
// path: '/about',
// name: 'about',
......
src/views/Home.vue
<template>
<div class="home">
<div class="home-wrap">
<h6 class="gangbi">home页{{msg}}</h6>
<h6 class="gangbi">钢笔字体</h6>
<ul>
......@@ -7,7 +7,10 @@
<button @click="testJump">跳转详情生成海报</button>
</li>
<li>
<button @click="jumpToLoading">跳转loading预加载页面</button>
<button @click="jumpToLoading('loading')">跳转loading预加载页面</button>
</li>
<li>
<button @click="jumpToLoading('keyframe')">跳转keyframe帧动画</button>
</li>
</ul>
<Music />
......@@ -34,8 +37,8 @@ export default {
testJump() {
this.$router.push({ path: 'detail', query: { detailId: 123456 } })
},
jumpToLoading() {
this.$router.push({ path: 'loading' })
jumpToLoading(name) {
this.$router.push({ path: name })
}
},
components: {
......@@ -46,8 +49,12 @@ export default {
</script>
<style lang="less">
<style lang="less" scoped>
.gangbi {
font-family: "gangbi";
}
.home-wrap{
background: rgba(0, 0, 0, 0.2);
}
</style>
\ 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 sign in to comment