Animating between screens in Nativescript - transition

Can someone please point me in the right direction to achieving this effect in both Android and iOS application, https://www.cocoacontrols.com/controls/pinterestanimator. Not necessarily this effect, but you will notice that the transition between two screens (list and details) is animated in non standard way (image enlarges).
The idea is to execute an animation between two screens, so that upon animation finish, the route is changed, backend service kicks in, etc. Not sure if I am expressing myself right, but how do I "swap" native screens transitions, with a custom animation? And doing this on case by case basis, not as a general rule to all transitions.
I am using Angular2 and Nativescript.
--
Edit: It is fine if the solution above seems like a hack, it doesn't have to be supported out of the box. To clarify, is it anyhow possible to:
capture and prevent default click action, thus preventing the native transition
animate the view
update the route programatically
execute the previously prevented action (call ngOnInit, or similar)

The page transitions can not be fully customized and currenтly you can only apply native transitions as the following listed in this API reference
curl (same as curlUp) (iOS only)
curlUp (iOS only)
curlDown (iOS only)
explode (Android Lollipop(21) and up only)
fade
flip (same as flipRight)
flipRight
flipLeft
slide (same as slideLeft)
slideLeft
slideRight
slideTop
slideBottom
Notice that some of the transitions (like curl) are supported only by iOS and others (like explode) are supported only by Android. Here is the documentation article about page transitions in Angular enabled application.

Related

How to implement Spotify-like iOS app sidebar feature

I've already implemented a sidebar like that in Facebook/Path apps with ECSlidingViewController but I've noticed that Spotify app it's a bit different and has a very slick effect. The sidebar is not already full visible but it slides and show the icons as more as you swipe with your finger. How to animate the sidebar in this way?
Here an image for a better explanation.
Take a look at MMDrawerController https://github.com/mutualmobile/MMDrawerController
It has nice sample app and allows custom sliding effects, including the one you are looking for
There are many such libraries available to implement the behaviour you have asked for. I would recommend ECSlidingViewController since its easy to use plus it supports StoryBoards:
ECSlidingViewController
As i said there are a lot of different libraries to implement the same thing. You can also check the link HERE that contains a whole list of similar libraries.

Fallback for CSS background image transition

I'm using CSS transitions for the background-image property, though from what I can gather they are only supported by Chrome and Webkit (it doesn't seem to work in Safari 5.1.7). I really don't want to use jQuery for the transition since its only solution is to fade out the element (and with it the content) and fade back with a new background. Normally I would do it the standard way and have multiple divs or images inside a wrapper to rotate between, but the way this site is set up that simply wouldn't work (well technically it could, but it just seems ridiculously and needlessly over-complicated).
Visit the site here and you'll see what I mean: http://bos.rggwebdesigns.com/
Is there some way to safely fall back for other browsers that don't yet support background image transitions, either by disabling it completely or some other method? If the browser can't handle it, I don't want the user to just see the background change abruptly.
You can use Modernizr for feature detection, and then change your CSS on the fly accordingly.
Modernizr

adding camera as subview

I am adding camera using {[UIImagePickerController availableMediaTypesForSourceType:UIImagePickerControllerSourceTypeCamera]} as a subview to a UIView with fixed boundaries in my app.
Everything is working fine. But all the examples i see shows displaying camera as a modalcontroller as single screen. My doubt is, are there any cases that APPLE will reject if the camera is added as an subview to a view?. Should it be only shown as a full screen modal controller?
There is no rule that says you may not use camera view as a subview. It's all down to the specifics of your requirements and your app. Apple probably won't reject your app just because of such use of the camera view.
For example, Layar app is using camera view as a background for their overlays - clearly not a modal controller.
At the same time, consider the user's experience. If you are providing your user with the ability to take a picture with the camera and then use this picture in further application logic, then using it as a modal controller may be a better approach, as it provides the user with a consistent experience across multiple apps: users do get used to certain experiences and you need to have a valid reason to go against those consistent experiences.
At the same time, if you do have a valid reason why you want to have camera view as a subview (for example, display an overlay layer over it or apply a filter to the preview, or whatever else), then this is a perfectly valid reason for your UI design decision.
So, to summarize, there's no rule against it, but keep the user's experience in mind. Also remember that Apple may choose to reject your app for any reason they choose - and they don't have to explain it to you. At least, that's what you're agreeing to when you join the developer's programme.

How can I use gestures on iPhone apps using Delphi Firemonkey?

I am trying to write an iPhone app using Delphi XE2 / FireMonkey and have got past many of the initial hurdles, but am now stuck on gesture handling.
I have created a test app with a TVertScrollBox, but I cannot scroll the contents, unless I enable the scroll bars (which are very thin), and touch those. This is not very iPhone friendly (and almost unusable). Would appreciate a pointer in the right direction.
Documentation seems to suggest using UIGestureRecognizer...
http://developer.apple.com/library/ios/#documentation/EventHandling/Conceptual/EventHandlingiPhoneOS/GestureRecognizers/GestureRecognizers.html
...however these need to be attached to a View, whereas the app is using a FireMonkey form.
Any thoughts would be appreciated.
I have worked out how to do this...
The TVertScrollBox control needs to have the MouseTracking property set to True.
All controls added to the TVertScrollBox then need to have their HitTest property (if it exists) set to False. After that it just works!
With Delphi Xe3, Fire monkey as support for basic gestures (zoom, rotation, pan)
But officially Xe3 doesn't support anymore "IOS" as a target.
You have to wait beginning of 2013 for the release of their "mobile studio" extension
Gestures not in FireMonkey at the moment.

Windows Phone 7 UI (Metro) possible on iOS?

How hard would be be to recreate Windows Phone 7 UI animations on an iOS device using UIKit?
More specifically, making animated boxes gradually move from side-to-side, and appear in a chained manner.
For example, windows phone 7 transitions here: http://www.youtube.com/watch?v=EUeNCzRhhDE
At 0:30 - the parallax scrolling effect (relatively easy?);
At 1:22 - the chained animation of the home screen;
Is this possible with CoreAnimation and UILayers, if so how complex would it get?
Thanks
It's not incredibly hard. For some things like parallax scrolling you can just use some of the basic view animation code and set different timings for different elements to get the effect.
Look at the animations Apple has in the Apple stores for providing help (similar to some of their screen savers). These are similar to what Windows is doing.
The bigger question would be whether it improves the user experience or just makes them wait longer to be able to interact your application.