I’ve got a looped animation that looks like this:
foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).loop();
I want to incorporate a delay of 800ms into each loop. Specifically before each time the stroke animates to { opacity: 0, width: 34 }. I’ve tried adding a delay in the animation:
foreground.animate(1000, '>', 800).stroke({ opacity: 0, width: 34 }).loop();
… but that just delays the first loop. Then I tried adding delay():
foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).delay(800).loop();
… but that, too, only adds the delay once.
Is it possible to have each loop include an 800ms delay at the beginning of each loop?
If I understand correctly, one way you could achieve this is by placing the animation related code in a function, and calling that function on the end of each animation:
function cycle() {
this.stroke({width: 0, opacity: 1})
.animate(1000, '>', 800)
.stroke({opacity:0, width: 34})
.after(cycle);
}
Then we can use cycle.apply(foreground) to get this to be the element(s) being transformed and the animation started:
var draw = SVG('content').size(500, 300)
var circle = draw.circle(100).attr({ fill: 'steelblue' }).move(200,20)
cycle.apply(circle);
function cycle() {
this.stroke({width: 0, opacity: 1})
.animate(1000, '>', 800)
.stroke({opacity:0, width: 34})
.after(cycle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<div id="content"></div>
Related
I am building a simple animated clock with QML and it works, but I want to have a "sweep second" in which the second hand rotates continuously and smoothly rather than abruptly transitioning from second to second. Without the Behavior line in the code below, I get a stepped-second but otherwise correct behavior. With the Behavior line, it works perfectly until the seconds go from 59 back to 0, and then it goes counter clockwise which is not all the behavior I want.
I read that using SmoothedAnimation would help, but when I tried substituting SmoothedAnimation for NumberAnimation it does a stepped-second until the 59 to 0 transition and then goes counter clockwise.
How do I alter this to have it only rotate clockwise but do so smoothly?
import QtQuick 2.0
Item {
width: 320; height: 320
Item {
property var time: new Date()
id: wallClock
Timer {
interval: 1000
running: true
repeat: true
onTriggered: wallClock.time = new Date()
}
}
Rectangle {
id: rect1
x: parent.width/2
y: parent.height/2 - 100
width: 10; height: 70
color: "red"
transform: Rotation {
origin.x: rect1.width/2
origin.y: rect1.height
angle: wallClock.time.getSeconds()*6
Behavior on angle { NumberAnimation { duration: 1000 } }
}
}
}
Rather than a NumberAnimation or SmoothedAnimation, I think a RotationAnimation is what you want. The advantage there is that it allows you to force the direction to remain clockwise.
transform: Rotation {
origin.x: rect1.width/2
origin.y: rect1.height
angle: wallClock.time.getSeconds()*6
Behavior on angle { RotationAnimation { duration: 1000; direction: RotationAnimation.Clockwise} }
}
I want to make free drawing on top of shapes at konvajs. like an exp; Can u give me advise about shapes attrs like zindex or smt.
https://ibb.co/jq9pUK
Your question is very broad and you are not showing what you have tried so far. You would get better help faster if you give a clear description and post cut-down sample code for your questions.
Konvajs works on top of the HTML5 canvas. When working with a konvajs you put shapes, lines, images and text on to layers. Layers have a z-order and shapes on a layer have a z-order.
To answer your question, I would follow the pattern:
- create the stage
- create the shape layer
- add the shapes to the shape layer - triangles, rectangles, circles, etc
- add another layer for the freehand drawing
- draw on this layer.
Because of the sequence of adding the components to the canvas the z-order will support what you ask for in your question. If you wanted the drawing to happen 'behind' the shapes you would create the layers in the opposite sequence.
The working snippet below shows how to do the steps that I have listed above, and how to listen for the events you need to make it operate. You can extend from this starter code to handle erasing, selecting line colour, thickness, and stroke style. See the Konvajs drawing tutorial for more information.
Good luck.
// Set up the canvas / stage
var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200});
// Add a layer for the shapes
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);
// draw a cirlce
var circle = new Konva.Circle({
x: 80,
y: s1.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
})
layer1.add(circle)
// draw a wedge.
var wedge = new Konva.Wedge({
x: 200,
y: s1.getHeight() / 2,
radius: 70,
angle: 60,
fill: 'gold',
stroke: 'black',
strokeWidth: 4,
rotation: -120
});
layer1.add(wedge)
// Now add a layer for freehand drawing
var layer2 = new Konva.Layer({draggable: false});
s1.add(layer2);
// Add a rectangle to layer2 to catch events. Make it semi-transparent
var r = new Konva.Rect({x:0, y: 0, width: 300, height: 200, fill: 'blue', opacity: 0.1})
layer2.add(r)
// Everything is ready so draw the canvas objects set up so far.
s1.draw()
var drawingLine = null; // handle to the line we are drawing
var isPaint = false; // flag to indicate we are painting
// Listen for mouse down on the rectangle. When we get one, get a new line and set the initial point
r.on('mousedown touchstart', function () {
isPaint = true;
var pos = s1.getPointerPosition();
drawingLine = newLine(pos.x, pos.y);
drawingLine.points(drawingLine.points().concat(pos.x,pos.y));
layer2.draw();
});
// Listen for mouse up ON THE STAGE, because the mouseup will not fire on the rect because the mouse is actually over the line point we just drew when it is released.
s1.on('mouseup touchend', function () {
isPaint = false;
drawingLine = null;
});
// when the mouse is moved, add the position to the line points and refresh the layer to see the effect.
r.on('mousemove touchmove', function () {
if (!isPaint) {
return;
}
var pos = s1.getPointerPosition();
drawingLine.points(drawingLine.points().concat(pos.x,pos.y));
layer2.draw();
})
// Function to add and return a line object. We will extend this line to give the appearance of drawing.
function newLine(x,y){
var line = new Konva.Line({
points: [x,y,x,y],
stroke: 'limegreen',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round'
});
layer2.add(line)
return line;
}
p
{
padding: 4px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Click & drag on the canvas to draw a line over the shapes.
</p>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
In the following example I have two shapes, a rectangle and a semitransparent circle:
http://jsfiddle.net/cequiel/zZ22s/
var stage = new Kinetic.Stage({
container: 'canvas',
width: 800,
height: 600
});
var layer = new Kinetic.Layer();
// adds a rectangle
var rect = new Kinetic.Rect({
x: 100,
y: 50,
width: 200,
height: 150,
fill: 'yellow',
stroke: 'black'
});
rect.on('mousedown', function() {
$('#text').text('mouse down');
}).on('mouseup', function() {
$('#text').text('mouse up');
}).on('mouseenter', function() {
$('body').css('cursor', 'pointer');
$('#text').text('mouse enter');
}).on('mouseleave', function() {
$('body').css('cursor', 'default');
$('#text').text('mouse leave');
});
layer.add(rect);
// adds a semitransparent circle
var circ = new Kinetic.Circle({
x: 300,
y: 125,
radius: 60,
fill: 'green',
stroke: 'black',
opacity: 0.2,
locked: true
});
layer.add(circ);
stage.add(layer);
The rectangle captures the mouse down, up, enter and leave events. But when the mouse is over the circle, the rectangle doesn't receive any event. And this is fine. But, how could I avoid this? I mean, how could I make the circle "invisible" to the mouse events? I'm looking for something similar to the 'mouseEnabled' property defined in AS3:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/InteractiveObject.html#mouseEnabled
Thanks.
You can instruct any shape to temporarily stop listening for events like this:
myShape.setListening(false);
Is it possible to change the background with an image fading in after a set time?
I am using the following code, but the image is not fading in. All I am achieving now is fading out the image with the transitionTo method, however I want it to fade in.
This is the code I am playing with:
var stage = new Kinetic.Stage({
container: 'container',
width: 1770,
height: 900
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var myBg = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 1770,
height: 900
});
// add the shape to the layer
layer.add(myBg);
// add the layer to the stage
stage.add(layer);
setTimeout(function() {
myBg.transitionTo({
opacity: 0,
duration: 4,
});
}, 3000);
};
imageObj.src = 'bg.png';
Can someone kindly shed some light?
It happens because you did not set initial opacity. What you were doing is setting opacity from 1 to 1, not from 0 to 1. please refer the following code.
var myBg = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
opacity: 0,
width: 1770,
height: 900
});
myBg.transitionTo({
opacity: 1,
duration: 4,
})
I use CSS3 Keyframes to make a image circle run without moving, i means like a wheel but circle not moving, it stay as it is.
Here is my CSS code :
.step_7 {
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px;
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
#-webkit-keyframes circle-run
{
0%{
-webkit-transform:rotate(0deg);
}
100%
{
-webkit-transform:rotate(360deg);
}
}
.animation {
-webkit-animation: circle-run 2s infinite;
-webkit-animation-timing-function:linear;
}
Javascipt :
$('.btn1_inv').click(function () {
$('.step_7').addClass('animation');
});
here is my sample code :
http://jsfiddle.net/vLwDc/25/
From these above code, my element run but it move a little bit, how can i fix it ? thanks in advance .
do you mean why is it wobbly ? if so it's coz width height are different so it will be like that as it's not a perfect circle