I want rotate a element with css3 animation and transform property,which from 20 degree to -20 degree
#-moz-keyframes oneRotate{
0%{
-moz-transform: rotate(20deg);
}
100%{
-moz-transform:rotate(-20deg);
}
}
.oneRotate
{
-moz-transform-style: preserve-3d;
-moz-animation-name:oneRotate;
-moz-animation-duration:2s;
-moz-animation-timing-function:ease-in-out;
-moz-animation-delay:0s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
}
the rotate order is 20 -> 0 -> -20... is anti-clockwise
but I want the order is 20 -> 90 -> 180 -> ...is clockwise
what can I do to achieve that?
Set the 100% rotation angle to 340 degrees. It's the same angle as -20 degrees since -20 + 360 = 340, but it'll rotate in the opposite direction since 340 > 20 but -20 < 20.
Related
My problem is when I scroll camera works good but closer to the end its stopping moving smoothly.
At this video I will show how its should work.
I was inspired by this web-site :)
And as I said, I have some little problems..
My glitch code: https://glitch.com/edit/#!/field-polished-border
This how this think is work right now:
gsap.to(camera.position, {
x: 1,
ease: "none",
scrollTrigger:{
trigger: sections[8],
},
})
Your if statements are pretty disorganized, so they eventually start conflicting with each other.
if(scrollTop >= 1400){
// rotate to y: -11
}
else{
// rotate to y: -9.5
}
if(scrollTop >= 3700){
// rotate to y: -12.5
}
This means that when scrollTop reaches 3701, it is both greater than 1400 and 3700, so it'll try to execute both rotations, fighting with each other and giving you glitchy behavior. You should clean up your if statements and make them more organized so they don't contradict each other:
if (scrollTop < 1400){
// rotate to y: -9.5 when less than 1400
}
else if (scrollTop < 3700) {
// rotate to y: -11 when between 1400 and 3700
}
else {
// rotate to y: -12.5 when greater than 3700
}
For example, I have an object that follows mouse horizontally, its minimum position is 100 and the maximum is 200.
Within this range, it follows mouse linearly, meaning 1 unit of mouse position equals to 1 unit of object position.
Now, if the mouse is outside of the range (below 100, or above 200), I want it to start applying friction, so the object gracefully stops the further it is from range, for example:
Mouse position | Object position
200 200
220 205
240 209
260 212
280 215
300 217
320 218
340 219
360 220
380 220
400 220
...
I managed to implement it like this within mouse-move handler:
if (mousePosition > 200 || mousePosition < 100) {
delta = mousePosition - objectPosition;
objectPosition += delta * 0.25; // 0.25 if friction factor
}
But is there a better way? How to implement function outside of mouse-move handler:
getObjectPosition(mousePosition) {
return // ???
}
The question is language agnostic.
You can calculate your the object position as a piecewise function of the mouse position:
getObjectPosition(mousePosition) {
if(mousePosition < 100)
return 100 - friction(100 - mousePosition);
if(mousePosition > 200)
return 200 + friction(mousePosition - 200);
return mousePosition;
}
Where friction is a function to calculate the "soft" function you want. A simple one would be:
friction(x) {
return 0.25*x;
}
which would reduce the object speed by 0.25 when its beyond the [100, 200] bounds. Your function seems to approach some kind of asymptote though. You can achieve it with, for example, a quadratic:
friction(x) {
M = 160;
x = min(x, M);
return x*(1 - x/(2*M));
}
Here the object will gradually slow down, and stop completely when the mouse is outside the [-60, 360] interval.
I am working with a drone, and I can read the yaw navigation angle from its sensors. However, I would like to establish this angle as the "0" angle when I start my process. The range of this angle is between -180 degrees to 180 degrees.
initial_yaw = read_yaw_angle()
current_yaw = read_yaw_angle() - initial_yaw
but if initial_yaw is 180 degrees, and the measured angle is, let's say, -50 degrees. Now I have that the current_yaw is -230 which is out of the range -180 to 180 degrees. How can I solve this issue? (is it modulo operator what I need to use?)
current_yaw = read_yaw_angle() - initial_yaw;
if (current_yaw < -180) {
current_yaw += 360;
} else if (currrent_yaw > 180) {
current_yaw -= 360;
}
I have this code for rotate image view:
func rotateAgain(){
UIView.animateWithDuration(1.0,
delay: 0.0,
options: .CurveLinear,
animations: {self.imageView.transform = CGAffineTransformRotate(self.imageView.transform, 1.degreesToRadians)},
completion: {finished in if self.rotating { self.rotateOnce() }})
}
What is wrong in the code?
The second argument for the CGAffineTransformRotate is for the angle, but it is in radians, if you want to transform radians to degrees, you have to multiply the angle in degrees with 0.0174532925
Example for rotating for 240 degrees:
CGAffineTransformRotate(self.imageView.transform, 240 * 0.0174532925)
I am trying to make a gauge in Qt Quick that has sections that "light up" from 0 to the needle's position.
One way I can think of doing this is by having an image of the segment and painting it and rotating it many times from code. However, I don't know how this can be done in QML.
It doesn't have to be QML and it doesn't have to be Qt Quick; it could be anything as long as I can use it with Qt and within Qt creator and preferably works accross platforms.
Edit: Made rough sketch but StackOverflow requires me to have 10 reputation to post them, so I am placing links.
No segments illuminated ---------------------------- Some segments illuminated
-
You could easily use a Canvas element to draw an arc stroke with control over its start and end position. Just compose that below the scale of the gauge.
Here is an example how to do that using a value from 0 to 1 to select how "full" the gauge is.
ApplicationWindow {
visible: true
width: 500
height: 500
Canvas {
id: canvas
anchors.fill: parent
rotation: -90
onPaint: {
var c = getContext('2d')
c.clearRect(0, 0, width, height)
c.beginPath()
c.lineWidth = 30
c.strokeStyle = "red"
c.arc(250, 250, 250 - 15, 0, Math.PI * 2 * circ.value)
c.stroke()
}
}
Slider {
id: circ
minimumValue: 0
maximumValue: 1
value: maximumValue / 2
onValueChanged: canvas.requestPaint()
}
}
As requested by Mitch, I explain - the canvas is rotated at 90 CCW degree because of the way Qt draws arcs - they do not start at "12 o'clock" but at 3. You can remove the rotation of the canvas just in case you might want to draw extra stuff, cuz you wouldn't want to make all your drawing offset at 90 degree just to sit right with the rotated canvas, all you need to do to get rid of the rotation is draw the arc in range -Math.PI * 0.5 to Math.PI * 1.5 to account for the art starting at 3 o'clock.