leafer-ui
leafer-ui copied to clipboard
Published
2 weeks ago
•
leaferjs
leaferjs
文字使用动画后在特定样式下会出现一个像素的跳动
对文字使用动画从透明度0->1进行动画时 , 在完全显示出来后的那一刻 文字会出现一个像素的闪动 不使用stroke属性的情况下 貌似没有这个情况 , 如果对多文字用连续出现动画 会有一个很明显的跳动
以下代码可在官网直接复现
// #创建 Text [标准创建 (Leafer)]
import { Leafer,App } from 'leafer-ui'
const leafer = new App({
view: window,
//view: window,
/*pixelRatio:1,*/
smooth:true,
grow: false, // 自动生长
fill: 'rgba(255,255,255,1)',
tree: {type: 'viewport', mobile: true, cursor: false, keyEvent: true},
zoom: {
min: 0.1, // 视图缩放范围
max: 20
},
move: {
holdSpaceKey: false, //按住空白键拖拽可平移视图
holdMiddleKey: false, //按住滚轮中键拖拽可平移视图
},
wheel: {
//直接滚轮缩放
zoomMode: false,
},
//usePartRender:false,
editor: {
// lockRatio: true ,
/* disabled:true,*/
flipable: true,
stroke: '#000',
hideOnMove: true,
circle: {},
editSize: 'size', // 默认修改元素宽高
point: {
editConfig: {editSize: 'font-size'}
}
}
})
const list = [
{
tag:'Text',
fill: '#0f1',
text: '我',
fontSize:12,
x:0,
stroke:{type:'solid', color:'#1736b3',style:{strokeWidth:1,dashPattern:[0,0]}},
animation:{
"keyframes": [
{
"style": {
"opacity": 0
},
"_findKey": "first_opacity"
},
{
"style": { "opacity": 0},
"duration": 0,
"_findKey": "delay"
},
{
"style": {
"offsetX": 0,
"opacity": 0
},
"duration": 0
},
{
"style": {
"offsetX": 0,
"opacity": 1
},
"duration": 0.5
},
],
"join": true,
"loop": 1,
"ending": "from",
"loopDelay": 0,
"autoplay": true,
}
},
{
tag:'Text',
fill: '#0f1',
text: '是',
fontSize:12,
x:25,
stroke:{type:'solid', color:'#1736b3',style:{strokeWidth:1,dashPattern:[0,0]}},
animation:{
"keyframes": [
{
"style": {
"opacity": 0
},
"_findKey": "first_opacity"
},
{
"style": { "opacity": 0},
"duration": 0.5,
"_findKey": "delay"
},
{
"style": {
"offsetX": 0,
"opacity": 0
},
"duration": 0
},
{
"style": {
"offsetX": 0,
"opacity": 1
},
"duration": 0.5
},
],
"join": true,
"loop": 1,
"ending": "from",
"loopDelay": 0,
"autoplay": true,
}
}
]
leafer.tree.add(list)
在做位移动画时 更加明显 而且和描边没关系了 正常文字也会出现这个问题
// #创建 Text [标准创建 (Leafer)]
import { Leafer,App } from 'leafer-ui'
const leafer = new App({
view: window,
//view: window,
/*pixelRatio:1,*/
smooth:true,
grow: false, // 自动生长
fill: 'rgba(255,255,255,1)',
tree: {type: 'viewport', mobile: true, cursor: false, keyEvent: true},
zoom: {
min: 0.1, // 视图缩放范围
max: 20
},
move: {
holdSpaceKey: false, //按住空白键拖拽可平移视图
holdMiddleKey: false, //按住滚轮中键拖拽可平移视图
},
wheel: {
//直接滚轮缩放
zoomMode: false,
},
//usePartRender:false,
editor: {
// lockRatio: true ,
/* disabled:true,*/
flipable: true,
stroke: '#000',
hideOnMove: true,
circle: {},
editSize: 'size', // 默认修改元素宽高
point: {
editConfig: {editSize: 'font-size'}
}
}
})
const list = [
{
y:150,
tag:'Text',
fill: '#0f1',
text: '我',
fontSize:20,
x:0,
//stroke:{type:'solid', color:'#1736b3',style:{strokeWidth:1,dashPattern:[0,0]}},
animation:{
"keyframes": [
{
"style": {
"opacity": 0
},
"_findKey": "first_opacity"
},
{
"style": { "opacity": 0},
"duration": 0,
"_findKey": "delay"
},
{
"style": {
"offsetY": -150,
"opacity": 0
},
"duration": 0
},
{
"style": {
"offsetY": 0,
"opacity": 1
},
"duration": 5
},
],
"join": true,
"loop": 1,
"ending": "from",
"loopDelay": 0,
"autoplay": true,
}
},
{
y:150,
tag:'Text',
fill: '#0f1',
text: '是',
fontSize:12,
x:25,
stroke:{type:'solid', color:'#1736b3',style:{strokeWidth:1,dashPattern:[0,0]}},
animation:{
"keyframes": [
{
"style": {
"opacity": 0
},
"_findKey": "first_opacity"
},
{
"style": { "opacity": 0},
"duration": 0.5,
"_findKey": "delay"
},
{
"style": {
"offsetY": -150,
"opacity": 0
},
"duration": 0
},
{
"style": {
"offsetY": 0,
"opacity": 1
},
"duration":5
},
],
"join": true,
"loop": 1,
"ending": "from",
"loopDelay": 0,
"autoplay": true,
}
},
{
y:150,
tag:'Rect',
fill: '#0f1',
text: '是',
fontSize:12,
x:60,
//stroke:{type:'solid', color:'#1736b3',style:{strokeWidth:1,dashPattern:[0,0]}},
animation:{
"keyframes": [
{
"style": {
"opacity": 0
},
"_findKey": "first_opacity"
},
{
"style": { "opacity": 0},
"duration": 0.5,
"_findKey": "delay"
},
{
"style": {
"offsetY": -150,
"opacity": 0
},
"duration": 0
},
{
"style": {
"offsetY": 0,
"opacity": 1
},
"duration":5
},
],
"join": true,
"loop": 1,
"ending": "from",
"loopDelay": 0,
"autoplay": true,
}
}
]
leafer.tree.add(list)