I want to increase the height of a cylinder on aframe as an animation.
How can this be achieved?
I'd use ngoKevins animation component:
1) either animate the scale:
animation__scale="property: scale; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 1 2 1"
2) or animate the height:
animation__height="property: height; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 3"
Fiddle here.
Using <a-animation> it would be like this:
<a-animation attribute="scale"
dur="1000"
direction="alternate"
to="1 2 1"
repeat="indefinite"></a-animation>
or
<a-animation attribute="height"
dur="1000"
direction="alternate"
to="3"
repeat="indefinite"></a-animation>
fiddle here
Related
I am learning Qml newly and i am trying to customize a slider as below
Animation to SliderBar & Text
And i was unable to figure the part how to apply animation or color the slider with thick red when slider handle is being dragged and apply fade out animation to text in parallel when the slider handle is being dragged.
I tried with ColorAnimation to achieve the coloring slider when handler is dragging and text part not able to figure out.
Attaching the code that i tried to achieve the expectation
Slider{
id:control
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
Attaching image of what i was able to achieve
What i achieved
If anyone now's how to render the text and apply fade out animation to the text when slider handle is being dragged, help is much appreciated.
Thanks in advance !!
Regarding the animation on the fading out your text. You could do the following without even the need of an animation react to onPositionChanged of the slider and change the opacity property of the text.
Edit: Adjusted my answer to your code changes.
Slider{
id:control
onPositionChanged:{
backgroundText.opacity = 1-position
}
background: Rectangle{
x: control.leftPadding
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitWidth: 331
implicitHeight: 68
width: control.availableWidth
height: implicitHeight
radius: 10
color: '#cc0000'
//opacity: 0.4
border.color: "#cc0000"
Rectangle{
width: control.visualPosition * parent.width
height: parent.height
color: "blue"
radius: 10
}
Text{
id:backgroundText
text: "Slide to Send"
color:"black"
anchors{
centerIn: parent
}
}
}
handle: Rectangle {
id: sliderHandle
property int fnValu : control.leftPadding + control.visualPosition * (control.availableWidth- width)
x: control.leftPadding + control.visualPosition * (control.availableWidth- width)
y: control.topPadding + control.availableHeight / 2 - height / 2
implicitHeight: 70
implicitWidth: 88
radius: 10
Text{
anchors.centerIn: parent
text: "SOS"
}
gradient: Gradient {
GradientStop { position: 1.0; color: '#990000' }
GradientStop { position: 0.0; color: '#cc0000' }
}
}
}
I am working with QML to try to display an image. I have the following code:
Rectangle {
id: border
anchors {
top: parent.top;
topMargin: vpx(20);
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Image {
id: picture
width: parent.width
height: parent.height
transformOrigin: Item.Center
rotation: (implicitWidth/implicitHeight > 1.3) ? 270 : 0
anchors.fill: border
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
If rotation is set to 0, it scales correctly to fill the rectangle. If rotation is set to 270, it doesn't fill the rectangle - it rotates correctly, but it is well within the rectangle in both directions. It should have scaled up more.
Why is this happening?
EDIT: The code above has been edited. All of the above code is within a larger rectangle. The purpose of this code is to rotate images 90 degrees when they have a width > height. When rotation is set to 0 (i.e. height > width and no rotation needed), the picture displays as the first case below. When set to 270 (i.e. width > height, rotation needed), the picture displays as the second case below. I would like it to be comparable to the first picture, which fills the width, as I understand "fillMode: Image.PreserveAspectFit" should work.
black is rectangle, red is the image.
It is kind of tricky, but you can try this way:
Rectangle {
id: border
anchors {
top: parent.top;
right: parent.right;
}
color: "black"
z: 6
width: 500
height: 750
Item {
id: pictureItem
transformOrigin: Item.Center
rotation: (picture.implicitWidth/picture.implicitHeight > 1.3) ? 270 : 0
anchors.centerIn: parent
width: rotation == 270 ? parent.height : parent.width
height: rotation == 270 ? parent.width : parent.height
Image {
id: picture
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: ".../pic.png"
}
}
}
I have prepared two test images:
And this is what I get with above chunk of code:
what confuse me is the way that the gradient color apply to arc, it seems not right, seems the colors cut off from special location, because of that the gradient color seems not gradient from start color to end color,
here is the code:
'use strict';
import React, {Component} from 'react'
import {View, StyleSheet} from 'react-native'
import Svg, {Defs, Stop, G, Path, LinearGradient, Line} from 'react-native-svg'
import {arc} from 'd3-shape'
export default class TestPage extends Component {
constructor(props) {
super(props);
}
render() {
let rIn, rOut, rMiddle, startAngle, endAngle;
rIn = 50;//inner circle radius
rOut = 55;//outer circle radius
rMiddle = 52.5;//middle circle radius
startAngle = 0;//start angle 0
endAngle = 300;//end angle 300
let circlePath = arc()
.innerRadius(rIn)
.outerRadius(rOut)
.cornerRadius(rMiddle - rIn)
.startAngle(startAngle)
.endAngle(2 * Math.PI / 360 * endAngle);
return (
<View style={Styles.wrap}>
<View style={{width: 300, height: 200, backgroundColor: '#000000', marginTop: 2}}>
<Svg width={300} height={200}>
<Defs>
<LinearGradient
id={'wholeArcLengthLine'}
x1={0}
y1={0}
x2={(2 * Math.PI * rMiddle * endAngle / 360).toFixed(2)}
y2={0}>
<Stop offset="0" stopColor={"#ff0000"}/>
<Stop offset="0.36" stopColor={"#ef52a3"}/>
<Stop offset="0.7" stopColor={"#b445dd"}/>
<Stop offset="1" stopColor={"#0000ff"}/>
</LinearGradient>
</Defs>
<G>
<Line
x={5}
y={10}
x1={0}
y1={0}
x2={(2 * Math.PI * rMiddle * endAngle / 360).toFixed(2)}
y2={0}
stroke={'url(#wholeArcLengthLine)'}
strokeWidth="5"/>
<Path
x={100}
y={100}
d={circlePath()}
fill={'url(#wholeArcLengthLine)'}/>
</G>
</Svg>
</View>
</View>
)
}
}
const Styles = StyleSheet.create({
wrap: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
});
and here is the result, the arc gradient color is different from the Line colr:
so why?
and version:
react: 16.0.0-alpha.12
react-native: 0.45.1
react-native-svg: 5.2.0
d3-shape: 1.2.0
I have a simple progress bar that turns from green to red. The animate method is really very handy there. But is there a way to add actions while the animation is running (e.g. show a label after 1 second)?
views.js:
<View id="progressBar" height="40%" width="100%" left="0%" backgroundColor="green" onClick="checkAnimation"/>
controller.js:
$.progressBar.animate({
left: 0,
width: "1%",
backgroundColor: "red",
duration: 2000
});
You can simply use setTimeout method irrespective of whatever animation is running, like this:
$.progressBar.animate({
left: 0,
width: "1%",
backgroundColor: "red",
duration: 2000
});
setTimeout(function(){
$.someLabel.visible = true;
// or
$.someOtherLabel.text = "Label changed while animation is running...";
}, 1000);
Is there a simple way to make a marker in Leaflet map blinking ? I mean animated blinking - something like a loop of transition from opacity 1.0 to opacity 0.5 in 1 second and then reverse, end of loop.
When you add a Marker you are able to specify an Icon - the options for which include a className. You can use this className option to animate the marker's icon via CSS.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
maxZoom: 18
}).addTo(map);
L.marker([51.5, -0.09], {
icon: L.icon({
iconUrl: 'https://unpkg.com/leaflet#1.0.3/dist/images/marker-icon.png',
className: 'blinking'
})
}).addTo(map);
#map {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#keyframes fade {
from { opacity: 0.5; }
}
.blinking {
animation: fade 1s infinite alternate;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<div id="map"></div>
To toggle a marker from blinking to non-blinking, you can use Leaflet's DomUtil to add the blinking class to the marker's img element:
// With the class added, the marker will blink:
L.DomUtil.addClass(marker._icon, "blinking");
// Without the class, it won't:
L.DomUtil.removeClass(marker._icon, "blinking");