Comments (6)
@natanraj You can animate opacity
.
from tabris-js.
I think page turning and flip pages should not be part of a generic animations api.
After some discussion with jordi, ralf and tim we agreed that we want to animate the following properties:
- layoutData (limited in android)
- opacity
- translation
- scale
- rotation
In the protocol we use one object tabris.Animation
per widget to configure the animation. It has the following properties for now:
- easing function: "easeOut"
- duration: 1000
- delay: 200
- target: o23
- properties: { see list above, ... }
In addition it the tabris.Animation
has call method start
and a Completion
event to notify the javascript/server that the animation ended.
from tabris-js.
I have created an example that makes use of the discussed features. In addition i have created an experimental implementation for the android client, that can run and animate this example.
tabris.load(function() {
var MARGIN = 12;
var page = tabris.createPage({
title: "Simple Animation",
topLevel: true
});
var label = page.append("Label", {
layoutData: {left: MARGIN, top: MARGIN},
background: "#6aa",
foreground: "white",
text: "Hallo World"
});
var button = page.append("Button", {
layoutData: {left: MARGIN, right: MARGIN, top: [label, MARGIN]},
text: "Animate"
});
button.on("Selection", function() {
tabris.create("tabris.Animation", {
target: label,
delay: 0,
duration: 1000,
repeat: 1,
reverse: true,
easing: "ease-out",
properties: {
opacity: 0.25,
rotation: 0.75 * Math.PI,
scaleX: 2.0,
scaleY: 2.0,
translationX: 100,
translationY: 200
}
}).on("Completion", function() {
this.dispose();
}).call("start");
});
});
from tabris-js.
Using the same api as shown above i have also created a more advanced example:
from tabris-js.
Animation protocol description
The following description outlines the current implementation of animation messages.
create {
type: "tabris.Animation"
}
set {
target: "w321", // the widget id of a widget to apply the animation on
delay: 0 // start delay in ms
duration: 1000 // animation duration in ms
repeat: 1 // number of repeats
reverse: true // should the animation reverse when repeating
easing: "ease-out" // "linear", "ease-in", "ease-out", "ease-in-out
properties: {
opacity: 0.25 // alpha value between 0.0 (translucent) and 1.0 (fully visible)
rotation: 0.75 * Math.PI // similar to canvas rotation
rotationX: 0.75 * Math.PI // similar to canvas rotation
rotationY: 0.75 * Math.PI // similar to canvas rotation
scaleX: 2.0 // scale factor
scaleY: 2.0 // scale factor
translationX: 100 // translation in X direction
translationY: 200 // translation in Y direction
}
}
// starts the animation atomically with all the properties previously set
call { method: "start" }
// cancels a running or previously scheduled (animation with start delay) animation
call { method: "cancel" }
// callback when the animation ended normally
listen { Completion: boolean }
notify "Completion" {}
// callback when the animation starts (potentially after start delay)
listen { Start: boolean }
notify "Start" {}
// callback on each animation frame while the animation runs
listen { Progress: boolean }
notify "Progress" {}
from tabris-js.
@mpost : Could we animate hide ? .animate({visible: true}, {duration: 1000}) something like this ? I am tryign this, but in vain. Reading your post now, I see only 8 attributes are supported
from tabris-js.
Related Issues (20)
- Theme preference does not work with Tabris.js 3.9 HOT 1
- Cannot pass function argument to custom component
- Update documentation for Android theme configuration
- Customizing cursorColor fails on Android 9
- Workers not working on Tabris 3.9 android after a local build HOT 8
- Error when attempt to open large video files with fs.openFile()
- PdfView load event never fired HOT 7
- Error after integrating mqtt.js with tabris.js HOT 3
- Documentation about plugin needs to be more precise HOT 1
- Trusting certificates does not work anymore
- [Request]: IDE with Design view
- [Question] : AbsoluteLayout HOT 4
- HEAD requests fail (Tabris.js 2.9.0)
- [Question/Request] Vulnerabilities
- [Request] Tabris JS Developer app on iOS Simulator
- Tabris failed to open on ios simulator HOT 3
- Unable to show image from apk HOT 3
- TS 4.x+: cannot override properties of Tabris widgets
- TypeError: Cannot set property crypto of #<Object> which has only a getter HOT 3
- Video controls never shown when controlsVisible is false
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tabris-js.