Animation in SAPUI5

Hi all,
I have two matrix layout. The first one contains seven images placed like a grid. How can we arrange all the images vertically in the second layout with animation?
-Thanks

Hi Dong,
you can either use simple CSS3 animations:
CSS3 Animations
Or you can use jQuery animations:
Effects | jQuery UI API Documentation
Regards
Tobias

Similar Messages

How to make tween animation in SAPUI5 apps?

Hi Experts,
Does anyone know how to make animation in SAPUI5?
Let's consider a simple example: I have an image control on the UI, by pressing a button, I want to tween the image control to another postion (furthermore, maybe changing the size and alpha of the image). Thanks.
Br,
Dong

Hi Dong,
you can either use simple CSS3 animations:
CSS3 Animations
Or you can use jQuery animations:
Effects | jQuery UI API Documentation
Regards
Tobias

How to apply animation

i would like to apply animation on control through jquery like toggel between two div (panel etc) using jquery also reply me how to import library in sapui5?

Hi DaveIII,
In my experience, just using Blend is hard to accomplish this requirement, we need to use Animation to make this work.
Please refer to this article:
http://www.codeproject.com/Articles/197132/Simple-WPF-Page-Transitions
The author created a simple library to apply transition animation between pages:
Any here is a simple sample, it controls animation from code behind:
<Storyboard x:Key="slideRightToLeft"
TargetProperty="RenderTransform.(TranslateTransform.X)"
AccelerationRatio=".4"
DecelerationRatio=".4">
<DoubleAnimation Storyboard.TargetName="viewer" Duration="0:0:0.6" From="-300" To="0"/>
<DoubleAnimation Storyboard.TargetName="bordervisual" Duration="0:0:0.6" From="0" To="300"/>
</Storyboard>
Download link: http://1drv.ms/1BfUzOB
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Issues using sap.m.SelectDialog (fixed height of 2000px, SAPUI5 1.20.4)

Hi there
I'm using SAPUI5 1.20.4 on SAP AS Java.
I have a sap.ui.commons.Dialog modal popup. Within this popup I can open another popup, but this time it is a sap.m.SelectDialog.
The animation when opening the SelectDialog is fine (fade in, zoom), but as soon as it finished rendering, there is the close button at the bottom and the area above is completely white.
By investigating this issue I found out, that the <section> tag below the <header> gets a fixed height of 2000px (inline style). The (generated) ID is __dialog4_dialog_cont.
I'm using Chrome with a screen resolution of 800x600 only.
Do you have any suggestions?
Regards
Tobias

I have some more information.
When initializing the SelectDialog, a variable is NaN.
When opening the SelectDialog it looks like this:
It still looks fine when "return this" gets executed. There must be some post-rendering which takes place after the SelectDialog was rendered.
I don't know exactly where it happens, but later it looks this way:
If you need additional information, please let me know.
Regards
Tobias

Deactivating sapui5 Diagnostic Tool

How can I disable sapui5 diagnostic tool at all in my application? It's triggered by key combination ALT + SHIFT + S which stands for letter Ś. I do not run my application with debug=true, so it should be "false" by default. Unfortunatelly I haven't found answer to my question in sapui5 documentation. I also tried put
sap.m.Support.off();
line, but it didn't work for me.

On the app you sent I cannot call diagnostic tool neither by shift + alt + s nor crtl + shift + alt + s
it's taken from sapui5 demo app Icon explorer (where my problem also exists):
SAPUI5 Version
1.18.8 (built at 201402191819, last change 33daa5601efe5497dd6c5280d052c72876341338)
User Agent
Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36
Debug Sources
OFFToggle
Application
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/m/demokit/icon-explorer/index.html
Configuration (bootstrap)
resourceroots
{"":"../../../../../resources/"}
themeroots
xx-loadallmode
xx-bindingsyntax
complex
theme
sap_bluecrystal
libs
sap.m
loglevel
Configuration (computed)
theme
sap_bluecrystal
language
pl
formatLocale
pl
accessibility
true
animation
true
rtl
false
debug
false
inspect
false
originInfo
false
noDuplicateIds
true
Loaded Modules
Application, jquery.sap.act, jquery.sap.dom, jquery.sap.encoder, jquery.sap.events, jquery.sap.global, jquery.sap.history,jquery.sap.keycodes, jquery.sap.mobile, jquery.sap.properties, jquery.sap.resources, jquery.sap.script, jquery.sap.sjax,jquery.sap.storage, jquery.sap.strings, jquery.sap.ui, jquery.sap.xml, model.Config, model.FavoriteModel, sap-ui-core,sap.m.BackgroundDesign, sap.m.Bar, sap.m.BarRenderer, sap.m.BusyIndicator, sap.m.BusyIndicatorRenderer,sap.m.Button, sap.m.ButtonRenderer, sap.m.ButtonType, sap.m.CustomListItem, sap.m.CustomListItemRenderer,sap.m.DateTimeInputType, sap.m.DialogType, sap.m.FacetFilterType, sap.m.FlexAlignItems, sap.m.FlexAlignSelf,sap.m.FlexBox, sap.m.FlexBoxCssPropertyMap, sap.m.FlexBoxRenderer, sap.m.FlexBoxStylingHelper,sap.m.FlexDirection, sap.m.FlexItemData, sap.m.FlexJustifyContent, sap.m.FlexRendertype, sap.m.GrowingEnablement,sap.m.HBox, sap.m.HBoxRenderer, sap.m.HeaderLevel, sap.m.IconTabFilterDesign, sap.m.InputType,sap.m.InstanceManager, sap.m.Label, sap.m.LabelDesign, sap.m.LabelRenderer, sap.m.List, sap.m.ListBase,sap.m.ListBaseRenderer, sap.m.ListHeaderDesign, sap.m.ListItemBase, sap.m.ListItemBaseRenderer, sap.m.ListMode,sap.m.ListRenderer, sap.m.ListSeparators, sap.m.ListType, sap.m.NavContainer, sap.m.NavContainerRenderer,sap.m.Page, sap.m.PageBackgroundDesign, sap.m.PageRenderer, sap.m.PlacementType, sap.m.PopinDisplay,sap.m.Popover, sap.m.RadioButton, sap.m.RadioButtonRenderer, sap.m.RatingIndicatorVisualMode, sap.m.ScreenSize,sap.m.SearchField, sap.m.SearchFieldRenderer, sap.m.SelectType, sap.m.Shell, sap.m.ShellRenderer, sap.m.SplitApp,sap.m.SplitAppMode, sap.m.SplitAppRenderer, sap.m.SplitContainer, sap.m.SplitContainerRenderer,sap.m.StandardListItem, sap.m.StandardListItemRenderer, sap.m.StandardTileType, sap.m.Support,sap.m.SwipeDirection, sap.m.SwitchType, sap.m.Text, sap.m.TextRenderer, sap.m.ToolbarDesign, sap.m.library,sap.ui.Device, sap.ui.Global, sap.ui.app.Application, sap.ui.app.ApplicationMetadata, sap.ui.base.BindingParser,sap.ui.base.DataType, sap.ui.base.Event, sap.ui.base.EventProvider, sap.ui.base.Exception, sap.ui.base.Interface,sap.ui.base.ManagedObject, sap.ui.base.ManagedObjectMetadata, sap.ui.base.Metadata, sap.ui.base.Object,sap.ui.base.ObjectPool, sap.ui.core.AccessibleRole, sap.ui.core.BarColor, sap.ui.core.CSSColor, sap.ui.core.CSSSize,sap.ui.core.CSSSizeShortHand, sap.ui.core.Collision, sap.ui.core.Component, sap.ui.core.ComponentMetadata,sap.ui.core.Configuration, sap.ui.core.Control, sap.ui.core.Core, sap.ui.core.CustomStyleClassSupport,sap.ui.core.Design, sap.ui.core.Dock, sap.ui.core.Element, sap.ui.core.ElementMetadata, sap.ui.core.EnabledPropagator,sap.ui.core.EventBus, sap.ui.core.FocusHandler, sap.ui.core.HTML, sap.ui.core.HTMLRenderer,sap.ui.core.HorizontalAlign, sap.ui.core.ID, sap.ui.core.Icon, sap.ui.core.IconColor, sap.ui.core.IconPool,sap.ui.core.IconRenderer, sap.ui.core.ImeMode, sap.ui.core.IntervalTrigger, sap.ui.core.LayoutData, sap.ui.core.Locale,sap.ui.core.MessageType, sap.ui.core.OpenState, sap.ui.core.Percentage, sap.ui.core.Popup,sap.ui.core.RenderManager, sap.ui.core.Renderer, sap.ui.core.ResizeHandler, sap.ui.core.ScrollBarAction,sap.ui.core.Scrolling, sap.ui.core.TextAlign, sap.ui.core.TextDirection, sap.ui.core.ThemeCheck, sap.ui.core.TitleLevel,sap.ui.core.UIArea, sap.ui.core.URI, sap.ui.core.ValueState, sap.ui.core.ValueStateSupport, sap.ui.core.VerticalAlign,sap.ui.core.Wrapping, sap.ui.core.XMLTemplateProcessor, sap.ui.core.delegate.ItemNavigation,sap.ui.core.delegate.ScrollEnablement, sap.ui.core.library, sap.ui.core.mvc.Controller, sap.ui.core.mvc.JSView,sap.ui.core.mvc.JSViewRenderer, sap.ui.core.mvc.View, sap.ui.core.mvc.ViewRenderer, sap.ui.core.mvc.ViewType,sap.ui.core.mvc.XMLView, sap.ui.core.mvc.XMLViewRenderer, sap.ui.core.routing.HistoryDirection,sap.ui.core.theming.Parameters, sap.ui.core.tmpl.Template, sap.ui.model.Binding, sap.ui.model.BindingMode,sap.ui.model.ChangeReason, sap.ui.model.ClientContextBinding, sap.ui.model.ClientListBinding,sap.ui.model.ClientModel, sap.ui.model.ClientPropertyBinding, sap.ui.model.ClientTreeBinding,sap.ui.model.CompositeBinding, sap.ui.model.Context, sap.ui.model.ContextBinding, sap.ui.model.Filter,sap.ui.model.FilterOperator, sap.ui.model.FilterType, sap.ui.model.FormatException, sap.ui.model.ListBinding,sap.ui.model.Model, sap.ui.model.ParseException, sap.ui.model.PropertyBinding, sap.ui.model.SimpleType,sap.ui.model.Sorter, sap.ui.model.TreeBinding, sap.ui.model.Type, sap.ui.model.ValidateException,sap.ui.model.json.JSONListBinding, sap.ui.model.json.JSONModel, sap.ui.model.json.JSONPropertyBinding,sap.ui.model.json.JSONTreeBinding, sap.ui.model.resource.ResourceModel,sap.ui.model.resource.ResourcePropertyBinding, sap.ui.thirdparty.URI, sap.ui.thirdparty.jquery-mobile-custom,sap.ui.thirdparty.jquery.jquery-1.7.1, sap.ui.thirdparty.jqueryui.jquery-ui-position, util.Sorter, view.App.controller,view.App.view, view.Master.controller

Open and edit animated .gif while preserving frame timing

CS4 Premium Design Edition, Win XP
I was disappointed with the removal of Image Ready from CS3 because although some of the functionality was placed into Photoshop 10, there was no way to open and edit an existing animated .gif while preserving the timing of each individual frame. I was told on the PS forum at the time that I really needed to use Fireworks. I resented that, because I was very happy with Image Ready and I didn't want to have to learn a new application just to gain functionality that had been included in previous versions of PS/IM.
I've now got CS4 Premium Design Edition which of course includs Fireworks... and here's what Help has to say on the subject of imported .gifs.
"Note: When you import an animated GIF, the state delay setting defaults to 0.07 seconds. If necessary, use the States panel to restore the original timing."
This is no use to me. What if I don't know the individual frame timings? What if there are 200 frames with varying timings?
Simple question: which current Adobe product is capable of importing a .gif while retaining the frame timings? If anyone knows, or if I've misunderstood the nature of the Fireworks Help quote above, I'd really appreciate some input here. Thanks :)
Not so simple question: why was an excellent gif-editing application thrown out to have its functionality partially replaced by a bunch of scripts and half-effective workarounds cooked up by desperate users ("import a gif by using the video import and typing *.* into the filename box..")? It's a fair question I think.
Mark

Hi Bob, that's not glib at all, it's a reasonable question.
I uninstalled it along with everything else when I installed CS3, in the reasonable expectation that whatever replaced IR would be at least equal in functionality.
Perhaps I should just dig out CS2 and install IM from there, but I have some serious reservations about doing so, because I don't know if/how a partial install of CS2 will impact upon my installation of CS4, and I'm not confident of getting support.
I am also curious to know if/why Adobe actually removed basic functionality without replicating or replacing it in their other software. I really want to know: which recent, currently supported Adobe product
should I be using in order to regain this functionality? Or do Adobe no longer produce a geniuinely comprehensive .gif-editing application?
Mark

Animated GIF ignoring frame timing

I am trying to create simple animated GIFs with a few layers
of text that simply fade in and fade out in sequence. My initial
attempt worked perfectly. Most frames use the default 7/100's of a
second delay as they fade. A few frames were manually set to much
longer delays so that the text pauses, before fading out to be
replaced by the next text.
When I reopened the file, to adjust the background color, and
then re-saved it, the GIF now plays straight through, ignoring the
timing of each frame. Nothing I do now can get it to pause on the
appropriate frames. I've tried cutting the symbols out and pasting
them into a new file, removing the animation from the symbols and
reapplying it, etc.
Any ideas, anyone?
Thanks in advance.

None, None.

Edit animated gif

Hi,
How can I edit an animated gif in Photoshop Elements 6 for Mac?
When I open the file there is just the first frame in one layer - no other layers available.
Thanks!

Thanks Barbara!
Barbara B. wrote:
... then bring it to PSE.
I can't drag the single frames from Preview to PSE, because PSE 6 doesn't run in window mode.
(Is this improved in the current version?)
I can only drag the single frames to the desktop (as TIFF files, I guess transparency info is lost then?).
Barbara B. wrote:
... there's a bug beginning in PSE 6 where you can't change the frame delay rate from the default when you save an animated gif.
What's the default frame delay rate? Maybe it's just what I need.
Barbara B. wrote:
You might want to look into a free program like giffun from stone.com instead.
Yes that's maybe a better idea. It doesn't have to be free software. Can you recommend something good?
Thanks again!

Can i open and edit animated GIF in Adobe Photoshop Touch?

Can i open and edit animated GIF in Adobe Photoshop Touch?

No, only regular static GIF images are supported. The desktop version of Photoshop does support this however.

Gif animations in Mail

I've read some threads about this problem, and while there is lively debate, there doesn't seem to be an answer. So I thought I would try it again with a new question.
A friend of mine (he has an old IMac) forwarded me an email with an animated gif. It was funny, and I wanted to forward it on. But I have never been able to do this. If I try to save the file, it saves as a MIME attachment, and I can't even open it. If I Download the file, the Get Info says it is a gif file, but if I open it in Preview, or attach it to a new email, it no longer animates and is just a still picture.
I tried forwarding the original email with the animated gif back to myself, and when it arrives, it no longer animates. My friend is no help. He's not really in to computing. He told me he just gets them from somebody else, and forwards it to me.
So why can I see the animated gif in my Mail, but can't save it, download it, cut & paste it, or forward it? I tried the Append Message suggestion from an old post, and that did not work either.
I noticed in some of the old posts some people seem to really hate gif's. I don't really care one way or the other. I just want to understand why my computer can receive them, but can't do anything else with them.

Although Jaguar and Panther Mail renders HTML received, they do not support composing HTML which also includes when forwarding a message received that was composed in HTML including animated gifs.
Although you cannot compose complex HTML within the body of a message with Tiger Mail, RTF with Tiger Mail is HTML and supports forwarding a message received that was composed in HTML including animated gifs.
Reason for this: if you automatically render all HTML received (with any email client with OS X) and a spammer uses HTML for message composition and includes embedded images or objects that must be rendered from a remote server, if the Mail.app Junk Mail filter does not automatically mark the message as junk and you open the message, this can reveal that your email address is valid to the spammer causing more spam to be received.
Copied from Why HTML in E-Mail is a Bad Idea:
"Because it introduces accessibility problems. When you write in plain text, the receiving mail client renders the text in whatever font the reader chooses. When you format email with HTML, the sender controls the formatting. But this is a trap: You only think your message will render the same way to the viewer as it appears to the sender. In reality, the receiver can end up squinting because the font looks so tiny, or vice versa. HTML is not rendered the same way from one viewing client to the next - all guarantee of accessiblity goes out the window. This is especially problematic for visually impaired persons."
Because it can introduce security issues and trojan horses -- it's a gateway to danger as any Outlook user can tell you. HTML can include any number of scripts, dangerous links, controls, etc.
Powerbook G4 17" Mac OS X (10.4.5)

Animated GIFs are ridiculously large - why?

Hi all,
I cannot figure out why the animated GIFs I am exporting are
so massive in file size. For example, I import a small 5-frame
650Byte GIF. I edit the size of the canvas to pad it to a square
(from 54x40 to 54x54, or something like that), then I save it with
the following settings:
Animated GIF
Exact Palette
0 Loss
4 Colours (5 including alpha channel)
No dither
And it comes out as 64.4KB. How can the file size increase by
100 times with barely any change? Even if I import it, change
nothing and save the file with the same settings as above, it's
still 64.4KB. Is Fireworks padding the file with unnecessary
information or something?
Thanks for any help,
John.

> But the original image is an animated GIF and it's less
than 1KB big! So
> how
> does it increase in size 100 times when I save it
even if I don't
> change
> anything about the image before saving? There is no
PNG file but I can
> link
> you to the original 650 Byte Animated GIF:
I'm confused. What is this I am looking at. What have you
done to it to
make it increase in weight?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Quircus" <[email protected]> wrote in
message
news:g6fohk$mip$[email protected]..
> But the original image is an animated GIF and it's less
than 1KB big! So
> how
> does it increase in size 100 times when I save it
even if I don't
> change
> anything about the image before saving? There is no
PNG file but I can
> link
> you to the original 650 Byte Animated GIF:
>
>
http://www.aotplaza.com/Prod.gif
>
> Is it something to do with my settings perhaps? Like
telling it to save
> extra
> information in the file?
>

Gif not animating when on the Internet

Hopefully some one can help as I have tried everything i can
think of
I have create a animation using Flash 8 I have exported this
as a Animated gif to my computer. I can open the file and it
animates fine on my pc. When i upload to myspace it does not
animate.
I have tried downloading a random gif from the net and
uploading it to myspace and this animates (Just wanted to check
Myspace works with gifs)
The problem only appears to be with animations I have made.
I have tried making a really small animation (about 110kb)
then uploading it to myspace but again it doesnt animate (so its
not a size issue)
Flash - I have tried exporting movie as a gif and publishing
as a gif. The Animation has been made using motion tweed and not an
action script and I have tried every combination of gif option i
can think of i.e loop animation, loop twice, changing the frame
rate, size , colours, transarency etc
Please help as im so confused as to why this doesnt work.

Perhaps Safari isn't quite what you require, too much work involved all the time making it easier to see
Take a look at my customized Firefox:
it always opens to the same size window (or full screen if you like)
it always zooms all web pages 160% (or whateve you like)
it always has large type on the menu bar area. (to whatever you like)
it's very highly customizable, (or use the plain default settings)
has more add-ons than anyone (a real plus when you need it)
has more themes and personas than anyone (make it YOUR browser)
Easier surfing option for hard of seeing users
Safari is about the absolute worst browser since Internet Explorer, it's because Apple has already got your money so there isn't any incentive for them to make a better browser.

Gif Animations

First off, I'd like to say I've been making gif animations in Photoshop Elements since 2.0, and I've had no problem with 6.0 either--- when I was on Windows.
For whatever reason, when I open a .gif animated image, I get an error message that says:
"This is an animated GIF. You can only view one frame. Saving over this file will result in a loss of information."
EVERY single time I open a gif, and as soon as I hit okay, it opens to the single frame locked. As I said, I've never had this problem with Photoshop Elements 6.0 in Windows... Any suggestions/ help please?

Your post is unclear on some important points. When you say "when I was in Windows" does that mean you are talking about a mac now? What version of PSE are you talking about?
If you mean PSE 8 for mac, you would be better off downloading a program like the free Giffun from stone.com and using that for animated gifs. For one thing the frame rate has been broken in the mac version of PSE in both 6 and 8.

Animated gifs in PS CS6

Hi all, I am trying to save animated gifs from PS, I can get it to work fine when the layers are just flat layers, but I need to create the animated gif when I have layer folders... Ie layer 1 will have a graphic and some text, layer 2 different graphic and different text. But I have to create lots of banners each with a slight change on the text. So I want to keep the text editable so its quick to just chnage the text and then save another animated gif. But when I try and create frames from layers its bringing all the bits from the layer as different frames ie the graphic is one frame then the text is one frame etc. Is it possible to create the animated gif while still having layer folders or does it just work if they are flat layers?

Hi thanks for the reply, i didnt think it was really working, but now I have had a play, it does work and its pretty easy to change the text, it does pop open another photoshop file to edit the text, but it works ok.
Thanks

Importing .GIF into Fc will not play the animated gif in output

I imported a animated .gif (attached video.gif) into Fc (of a sequence of pics I took saved as an animated .gif)
It inported as a "bitmap image" and upon export to swf it did NOT show the .gif as an animated .gif but just shows the first frame..
(It did not put this file into an assests folder...)
So I converted the "bitmap image" into an optimaized graphic...and NOW it DOES put the original animated gif into the "assets" folder with a Graphic1.fxg and video.gif in that folder.. and If I open the gif in the assest folder it plays it as the animated .gif it is..
BUT SADLY upon export to SWF it still DOES not play the gif as an animated gif.. just the first frame...
Can I do anything in the code to tell the swf file that is exported to play the gif in the assest folder as an animated gif not just show the frame?
I did the animated gif approach becasue I setup a photoshop cs4 file with a quicktime video as a layer and Fc only brought in the first frame of the quicktime layer..
Could the next beta of Fc include the ability to import and play animated gifs as artwork as well AND/or to import Ps Cs4 video layers as videos
So I would have to created a video page in flash pro and import that as a object? into a state?
(no experience with flash pro but just bought cs4 and will try to learn FlashPro overweekend)

Interesting. I don't think this is somethign you can do in Flash Catalyst. We have .GIF support in the Flash Player but I don't think you can use a GIF asset inside Catalyst. If you need that GIF to play you'll have to embed it using Flash Builder.
But Flash Catalyst will support video version 1.0. I don't think you can turn arbitrary layers into "video" layers but you can bring in video files (like .FLV) and then attach components to behaviors (like play, stop, etc).
=Ryan
[email protected]

Animation in SAPUI5

Similar Messages

Maybe you are looking for