Sencha Touch animation options - animation

Where can I find a list of the available animation types for Ext.Panel.show()? I've searched the documentation and googled "sencha touch animation options", but can't find anything.

You can see all the animations here
http://dev.sencha.com/deploy/touch/examples/production/kitchensink/
And here's the API
http://docs.sencha.com/touch/2-0/#!/api/Ext.anims

Here is the documentation for the available animation types:
http://docs.sencha.com/touch/2-0/#!/api/Ext.anims
Some of them don't work on Android.

In ST 2
cube *
fade
flip *
pop
slide
wipe *
*does not work in android
Ext.Anim.run(this, 'fade', {
out: false,
autoClear: true
});
Do not forget the
Ext.requires('Ext.Anim');

Related

Not getting data from R3F useScroll because of zIndex

I'm trying to run an animation based on scroll in the background of a React app.
I use Threejs with React Three Fiber. In R3F, there is a hook called useScroll which I want to use.
Problem is that my Threejs scene (a Canvas) is in the background with zIndex: -100, so the scroll handler doesn't get the user input.
If I remove the zIndex property, everything works, but It's not what I want.
The scene look like this demo, the only difference is that mine has element in front.
I don't know if the solution is to use a different css style or something more complexe to allow the handler to do his job. I've been looking at React Portal but I don't think it will work.
Any ideas ?
Thanks in advance.

How to look to objects using lookAt() with a-frame camera component and look-controls

Goal: I want to create a Web based experience where the user need to see a series of elements on the scene and later, I want to leave the user explore alone.
I have several objects around the scene and I want the camera to look at them one by one. I am using the lookat() method but is not working correctly. I found this example on Threejs:
http://jsfiddle.net/L0rdzbej/135/
But my example is not working like the previous example.
After the answer of #Mugen87 is working but with a little modification:
document.getElementById('cam').sceneEl.camera.lookAt
Access the camera in this way. You can see the example here:
https://glitch.com/~aframe-lookat-cam-not-working
Please click on the button "animate camera".
As mentioned in this thread, you have to remove or disable look-controls if you're overriding camera rotation manually. So you can do:
var cameraEl = document.getElementById('camera');
cameraEl.setAttribute('look-controls', {enabled: false});
to disable the controls, perform your lookAt() operations, and then enable the controls via:
cameraEl.setAttribute('look-controls', {enabled: true})
I finally could make it worked. I am new in Threejs and aframe and surely I don't understand rotation, positions,world coordinates good enough but I think I did a decent work. Here the link:
https://glitch.com/~aframe-lookat-camera-working
I hope will be useful for somebody on the future.

detect zooming in and out on pdf.js

I want to detect when a user is zooming in or out on a document that is opened with the pdf.js library on an iframe. I'm pretty much looking for the term of "whatGoesHere" on the code below. The equivalent of 'pagechange' or 'pagesloaded' only for zooming.
innerDoc.addEventListener('whatGoesHere', function(e)
{console.log("zoom changed!");});
I found that 'pagerendered' does trigger after every zoom, but it also triggers on page moves. If there's an event strictly for zooming that'd be ideal.
there are 3 events for zooming:
zoomIn
zoomOut
zoomReset

taking a 'snapshot' of babylonjs scene sometimes works, sometimes doesn't

I am trying to take a 'snapshot' of a babylon3d scene ... in other words: I am trying to clone a babylon3d canvas when a user presses a button, and then append the new <canvas> to the <body> .. Sometimes it works, but other times it does not.
However, if I use a simple canvas (ie. by using fillRect), the cloning/appending always works as expected.
I have set up a test on plunker to demonstrate my problem: plunker: press the button over and over again to see how sporadic it behaves when there is a babylon scene. AND NOTE: You can toggle between the simple canvas and the babylon canvas from within the _jquery(document).ready(...) handler.
thanks, Shannon
This is because from version 2.3.0 of Babylonjs :
Engine now initialize WebGL with preserveDrawingBuffer = false by default.
You need to initialize the Engine by passing a {preserveDrawingBuffer: true} object as third parameter.
Forked plnkr
But this will unfortunately kill your canvas' performances.
See more about it here.
I'm not really a specialist of Babylonjs, and I didn't find a way to make a call from scene.render method where we could use the flag method proposed by
#CapsE. But there is a BABYLON.Tools.CreateScreenshot(engine, camera, size) method, which will make a downloadable png from your scene ; maybe this could help you.

fullpage.js not working on mobile device

I use the plugin fullpage.js for a new project.
Now there is a problem. The Scrolling animation doesn't work on mobile devices. Here is the URL: www.manu-oliver.de/web/test.html
I hope somebody can help me. :)
You are using responsive: 900, which means fullPage.js will stop auto scrolling in screens with less than 900 pixels width as pointed in the docs.
responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

Resources