I'm developing a PhoneGap/Cordova application with AngularJS. Since my target platform is Android I looked into different approaches for activity transitions. In other words; How to animate the transition between form A and form B while providing a native and intuitive user experience.
My application will be implementing the material design guidelines and I stumbled upon a transition animation called "shared element transition" which I think would work perfectly for most of my application flows.
I actually really like this approach and was wondering about how to achieve an implementation based on Angular 1.5 which is as generic and flexible as possible and easy to use across the application.
Since I'm still new to AngularJS, I wanted to check back with the community to find a neat way to implement something along the lines of the shared element transition or maybe get pointed to an already existing implementation.
For those wondering, I'm using Angular 1.5 and MaterializeCSS to empower my app. Thank you very much!
Check this tutorial (ready made component to use as well), it animates hero elements between different views and maintains proper routes.
http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html
To summarize, the hero element has to exist between the two views being transitioned. When transitioning, the hero element is temporarily hidden in the target view till the position animation ends. If the target view is being loaded directly (refresh, bookmark), no animation takes place and the hero element is there.
Related
I am trying to implement a clickable HTML/CSS/Javascript based layer component on top of an ongoing broadcast, such as a clickable advertisement banner at the top of the broadcast.
But being a novice to the TAL framework, I am currently trying to figure it out on the example project provided by BBC here:
https://github.com/bbc/talexample
Any assistance towards the usage of broadcast object in the TAL framework, or a general advice would be a huge help for me as I am struggling to understand the framework.
TAL's documentation for Broadcast TV Widget can be found here: https://bbc.github.io/tal/other/broadcast.html
My work overall is based on HbbTV's, if it makes any difference.
I'm not very familiar with TAL but the broadcast widget you have linked seems to be used to control de broadcast object (showCurrentChannel(), getCurrentChannelName(), setPosition(top, left, width, height), etc) so, if you only need to build a clickable banner over the broadcast you don't need to deal with the broadcast object.
Starting from the talexample you can:
Adapt the static/style/layouts/720p.css to fill only your desired area off the screen instead the current fullScreen style
Alse you should remove some fullscreen assets like background-image: url(../../img/bbc_background_720.png) from the css
In order to test a minimum set of features, remove some of the sample components and leave just a button or similar to test your modifications.
After that works, you can start to implement the image widget or the widget you want
I am new to React but have not found a suitable solution to my first problem on the job.
The specific context is of a navigation component that composes several other components and together they are a redistributable unit, independently testable as a whole module.
The use case of the component is to sometimes render it in desktop mode using React media queries, and other times in mobile - in which case it needs decorated with flyout behaviour.
So I want to decouple the navigation component from having to know about flyout. In respect of the 'tell don't ask' principle or event driven I want to be able to notify a parent that navigation has changed and depending on how this component is implemented respond accordingly (in mobile, the flyout needs to get hidden, in desktop there is no flyout decorator).
I looked at redux-ui which is a nice syntactic sugar using annotations but falls down when a property it is trying to set in the state hierarchy doesn't exist. And besides, this breaks the decoupling model.
I am a little abstract here I realise but does anyone have a recommendation on how I might approach this? I suspect that a possible solution might involve not having a hierarchy (is-a) imposed by the decorating wrapper and rather has-a flyout capability but would welcome industry experience on this.
Thanks
There are a few ways to handle this. The simplest would be to do it purely in CSS. Have all the HTML for the component always in the component and only the CSS would know about mobile or not.
Alternatively, you could have a piece of global state that gets set when the app loads and tells the app whether it's on mobile or desktop, and then pass that down to any relevant components. This method would be a bit of a pain because 'mobile' and 'desktop' are really just 'small screen' and 'larger screen' and as a result, this may change while the user is in the middle of using the app (like changing screen size, for example). So you'd have to keep track of all that with a bunch of listeners that are constantly listening for window resize events.
The simplest solution does seem to be pure CSS here.
I have been using react to build out an editor. One of the configurable properties is to dynamically generate background color animation. For example, an infinite fade in and fade out with a x second period.
The problem is that the color animation needs to be same and synchronized in multiple views. CSS animations does not enable that synchronization without being hacky. I want to use 'react-motion' but it does not incorporate timing easily.
Looking for some concrete examples using react + react libraries (ideally react-motion). Thanks in advance.
Not a direct answer to your request for examples using react + react libraries, but, if you're rendering on the client/browser you can use a global var for keeping sync between views. If that is too "hacky" for you, then perhaps finding a common parent up the ladder that both views can be handed a synchronized var/value.
After doing quite a bit of research into all of this, it turns out that the answer is just working at the animation frame level.
CSS animations abstracts all of this away from devs but as a result it gives very little control between animations.
React Motion react-motion while a good library for dealing with transition animations (it's intended purpose) again does not address controls between animations.
They key though exists in the react-motion code. You just have to request animation frames one after the other using raf library and then calculate the animations per view using the common frame info. It's pretty tedious and no real generic solution here.
I am new to AngularJS and I've learned quite a bit in the last few weeks, however I have several questions. So currently I have a jQuery prototype that I would like to convert to use AngularJS. For any animations or page transitions I am using css transitions. To change pages, I am changing the body class with jQuery which in turn animates elements on or off the page.
In AngularJS, views are displayed and removed with no animation at all. The way I need it, some views would use some elements from the last view.
For example, there is a start view and a search view that contains a search input field that animates. When the page is loaded, the start view is loaded. When the user clicks submit, it would then load the search view but the search bar should stay there and animate to the top for future searches.
I am somewhat confused as to how to go about doing this. Any suggestions?
When possible use the unstable / development versions of angular.js. (There are pretty stable).
The newest have an ng-animate directive which is usable for the most use cases.
Also there is nganimate.org with a lot of examples and there this article and this one which should get you started.
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl