I have seen some examples in the documentation and the demos that the data-animation attribute can be used to switch off animations on a widget by specifying data-animation="false".
My question is: how can I define other settings for animations. For example:
{
animation: {
// fade-out current tab over 1000 milliseconds
close: {
duration: 1000,
effects: "fadeOut"
},
// fade-in new tab over 500 milliseconds
open: {
duration: 500,
effects: "fadeIn"
}
}
}
I cannot find documentation anywhere on how to define animation configuration like the one above using the data-animation attribute.
You should define it as:
data-animation="{ close: { duration: 1000, effects: 'fade:out' }, open: { duration: 500, effects: 'fade:in' } }"
Example for a window:
<div id="dialog" data-role="window" data-animation="{ close: { duration: 1000, effects: 'fade:out' }, open: { duration: 500, effects: 'fade:in' } }" data-visible="false">
This is the content of the window
</div>
See it in action here : http://jsfiddle.net/XNcmt/70/
The relevant documentation is this here.
You can can basically use the same values (primitives like boolean or object literals) for declarative initialization; the only difference is that it's a string representation of the object.
See OnaBai's answer for an example.
Related
I have been working on this issue for some time and cannot find a correct solution.
Here a pen https://codepen.io/jean2607/pen/bXKPXz?editors=0010
with some code
Plotly.newPlot('myDiv', [trace1, trace2, trace3, trace4], layout).then(function() {
Plotly.animate('myDiv', frames, {
transition: {
duration: 0
},
frame: {
duration: 1,
redraw: false
}
});
});
I would like to animate only the green "dashdot line" corresponding to trace 4 but impossible so far...
I must be doing something wrong, but I can't see what it is !
Thank you in advance for your help
Finally, I found a solution that meets my needs
There was still a small error in the preparation of the data for the target trace but it is especially with this piece of code that everything works well now.
If someone finds something more appropriate, even better!
Plotly.newPlot('myDiv', [trace6, trace2], layout, options)
.then(function() {
Plotly.addTraces('myDiv', trace1);
})
.then(function() {
Plotly.addTraces('myDiv', trace4);
})
.then(function() {
Plotly.addTraces('myDiv', trace5);
})
.then(function() {
console.log('top!');
Plotly.animate('myDiv', frames, {
transition: {
duration: 0
},
frame: {
duration: 1,
redraw: false
}
});
})
I have following QML GridView:
GridView
{
id: ueProductGridView
antialiasing: true
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: 200
cellHeight: 200
delegate: Rectangle
{
id: test
width: 192
height: 192
color: "red"
Text
{
anchors.fill: parent
text: index
}
transform:
[
Rotation
{
id: plateRotation
angle: -90
axis { x: 0; y: 1; z: 0 }
origin.x: -200
origin.y: 0
}
] // transform
SequentialAnimation
{
id: addAnimation
PauseAnimation
{
duration: Math.random()*2000
}
NumberAnimation
{
target: plateRotation
property: "angle"
to: 0
duration: 1000
}
}
SequentialAnimation
{
id: removeAnimation
PropertyAction
{
target: test
property: "GridView.delayRemove"
value: true
}
NumberAnimation
{
target: test
property: "scale"
to: 0
duration: 1000
}
PropertyAction
{
target: test
property: "GridView.delayRemove"
value: false
}
}
GridView.onAdd:
{
addAnimation.start();
} // onAdd
GridView.onRemove:
{
removeAnimation.start();
} // onRemove
} // delegate
Component.onCompleted:
{
model=10;
} // onCompleted:
} // GridView
Now, why delegate animations do not work, i.e., why GridView is empty? The code regarding animations was taken from tutorial and in there it works. However, if I comment/remove all code regarding animations, delegates are visible in GridView and it is all ok:
GridView
{
id: ueProductGridView
antialiasing: true
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: 200
cellHeight: 200
delegate: Rectangle
{
id: test
width: 192
height: 192
color: "red"
Text
{
anchors.fill: parent
text: index
}
} // delegate
Component.onCompleted:
{
model=10;
} // onCompleted:
} // GridView
The animations associated to insertion/removal of elements from the views are Transitions (e.g. see add), between different States and are indeed called ViewTransitions. You should really take a deep look at the documentation page of this type: it is full of nice examples and describes in great details how addition/removal animations should be implemented.
When you define a ViewTransition, any property referenced inside it, if not differently targeted, refer a delegate property. Hence, if you write inside your GridView:
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }
NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
}
you are saying that each time a new delegate is added to the grid, its opacity as well as scale properties should be animated. Top level animations, like in this case, run in parallel so the delegate is scaled and made visible at the same time.
Now, if you want to animate nested properties, like in the case of the Rotation angle, the easiest way is to alias it inside the delegate. That way it can be handled exactly the same way as any other delegate property, resulting in a clearer and simpler code.
It should be noted that the animations in your example does not work also because they are associated to add Transition. Such Transition is not used during model initialisation when instead the populate Transition is used. From the documentation:
This property holds the transition to apply to the items that are initially created for a view.
It is applied to all items that are created when:
The view is first created
The view's model changes
The view's model is reset, if the model is a QAbstractItemModel subclass
Finally, an advice. If you animate addition and removal of elements, especially if the animation is slow, it is also important to animation the adjustment made by the view to the other elements. Animating them in a graceful way can improve visual feeling A LOT. Hence, when you provide a add and a remove transition, take in account also the addition of a addDisplaced and a removeDisplaced Transition.
Here follows a modified version of your code that shows all the points discussed above:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
id: window
width: 600
height: 400
visible: true
ListModel {
id: model
ListElement { code: "0" }
ListElement { code: "1" }
ListElement { code: "2" }
ListElement { code: "3" }
ListElement { code: "4" }
ListElement { code: "5" }
}
GridView {
id: ueProductGridView
anchors.fill: parent
antialiasing: true
clip: true
cellWidth: 200
cellHeight: 200
delegate: Rectangle {
width: 192
height: 192
color: "red"
property alias angle: rot.angle // alias!
Text {
anchors.centerIn: parent
text: code
font.pixelSize: 30
}
transform: Rotation {
id: rot
angle: -90
axis { x: 0; y: 1; z: 0 }
origin.x: -200
origin.y: 0
}
MouseArea {
anchors.fill: parent
onClicked: ueProductGridView.model.remove(index)
}
} // delegate
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 } //since is already at 1.0 we should enforce the start from 0
NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
}
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.InBack }
}
remove: Transition {
NumberAnimation { property: "scale"; from: 1.0; to: 0; duration: 200 }
}
removeDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.OutBack }
}
populate: Transition {
NumberAnimation { properties: "angle"; to: 0; duration: 500 }
}
}
Component.onCompleted:{ ueProductGridView.model= model }
}
I am using Highmaps and I limit the zoom range by setting the minRange property in the xAxis property.
This limits the zoom in factor as expected, but when zooming in too much, it does not let you zoom out again until you drag the map. To be more precise, it lets you zoom out until the x-axis is completely visible, but if your viewport is too wide to display the whole y-range of the map at this particular zoom step, you only get a horizontal stripe.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
minRange: 5000 // <- prevent zooming in too much
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
});
You can see a working demo here: http://jsfiddle.net/b9d0ry3t/
This is a standard Highmaps demo, where I simply added the minRange on the xAxis, nothing else.
This and many other problems have been fixed with the most recent Highmaps update (Feb. 2015).
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });
I want to move a widget to the center of the container in a sequential animation, but it does not work:
SequentialAnimation {
PauseAnimation { duration: 1000 }
AnchorAnimation {
duration: 1000
// ERROR: Cannot assign to non-existent default property
AnchorChanges {
target: widget1
anchors.horizontalCenter: container.horizontalCenter
}
}
....
Neither:
SequentialAnimation {
PauseAnimation { duration: 1000 }
// ERROR: Cannot assign object to list
AnchorChanges {
target: widget1
anchors.horizontalCenter: container.horizontalCenter
}
AnchorAnimation {
duration: 1000
}
....
You can't put an AnchorChanges item into an animation. You have put it into a state definition.
Refer to the documentation for more details.