archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-01-25 15:08:11 +00:00
Code Issues Projects Releases Wiki Activity

滑块移动。

Browse Source
This commit is contained in:
liteng 2018-09-11 12:14:40 +08:00
parent 0b6949e10c
commit e900698ddc
2 changed files with 53 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ShadowEditor.Web/assets/css/main.css
View File

@ -854,7 +854,7 @@ table.Table .TableBody td {
.animation-panel .box .slider {
position: absolute;
left: 10px;
left: 0;
top: 0;
width: 1px;
height: 100%;

59
ShadowEditor.Web/src/editor/bottom/AnimationPanel.js
View File

@ -11,6 +11,9 @@ function AnimationPanel(options) {
this.canvas = null;
this.context = null;
this.isPlaying = false;
this.sliderLeft = 0;
};
AnimationPanel.prototype = Object.create(UI.Control.prototype);
@ -26,16 +29,20 @@ AnimationPanel.prototype.render = function () {
cls: 'controls',
children: [{
xtype: 'iconbutton',
icon: 'icon-backward'
icon: 'icon-backward',
onClick: this.onBackward.bind(this)
}, {
xtype: 'iconbutton',
icon: 'icon-play'
icon: 'icon-play',
onClick: this.onPlay.bind(this)
}, {
xtype: 'iconbutton',
icon: 'icon-forward'
icon: 'icon-forward',
onClick: this.onForward.bind(this)
}, {
xtype: 'iconbutton',
icon: 'icon-stop'
icon: 'icon-stop',
onClick: this.onStop.bind(this)
}, {
xtype: 'text',
text: 'X1'
@ -46,11 +53,13 @@ AnimationPanel.prototype.render = function () {
children: [{
xtype: 'canvas',
cls: 'timeline',
id: 'timeline'
id: 'timeline',
scope: this.id
}, {
xtype: 'div',
cls: 'slider',
id: 'slider'
id: 'slider',
scope: this.id
}]
}]
};
@ -62,7 +71,7 @@ AnimationPanel.prototype.render = function () {
};
AnimationPanel.prototype.onAppStarted = function () {
var canvas = UI.get('timeline').dom;
var canvas = UI.get('timeline', this.id).dom;
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
@ -108,4 +117,40 @@ AnimationPanel.prototype.onAppStarted = function () {
}
};
AnimationPanel.prototype.updateUI = function () {
var slider = UI.get('slider', this.id);
slider.dom.style.left = this.sliderLeft + 'px';
};
AnimationPanel.prototype.onAnimate = function () {
this.sliderLeft++;
this.updateUI();
};
AnimationPanel.prototype.onBackward = function () {
};
AnimationPanel.prototype.onPlay = function () {
if (this.isPlaying) {
return;
}
this.isPlaying = true;
this.app.on(`animate.${this.id}`, this.onAnimate.bind(this));
};
AnimationPanel.prototype.onForward = function () {
};
AnimationPanel.prototype.onStop = function () {
if (!this.isPlaying) {
return;
}
this.isPlaying = false;
this.app.on(`animate.${this.id}`, null);
this.sliderLeft = 0;
this.updateUI();
};
export default AnimationPanel;