Storyboard animation only displays last frame - animation

I have to create an animation for a Windows Phone 8.1 app. I want to change the ImageSource property of my Page.Background to display an animated splash when the app launches.
I used this sample as a model: http://www.codeproject.com/Tips/823622/Images-Animation-By-Using-Story-Board-in-Windows-P
In my code, the animation lasts 8 seconds for 80 images, but the screen stays black for 8 seconds, then only displays the last frame.
private void setupStoryboard()
{
storyboard = new Storyboard();
var animation = new ObjectAnimationUsingKeyFrames();
Storyboard.SetTarget(animation, BackgroundBrush);
Storyboard.SetTargetProperty(animation, "ImageSource");
storyboard.Children.Add(animation);
for (int i = 0; i <= 80; i++)
{
var keyframe = new DiscreteObjectKeyFrame
{
KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(100 * i)), //Time Interval
Value = String.Format("ms-appx:///Assets/Animation/splash{0:D2}.png", i) //Source of images
};
animation.KeyFrames.Add(keyframe);
}
Resources.Add("Storyboard", storyboard); //Add story board to resources
}
This code is called from OnNavigatedTo, and I have a button to call storyboard.Begin();
This problem appears on simulator and device.
Update: The problem persists with a greater interval (1000ms), and smaller images (30KB jpg instead of 240KB png)
Update: Same problem with an <Image> tag
Update: Still not solved, but I managed to obtain the desired effect. I created a DispatcherTimer to manually change the image. Unfortunately, this creates a nasty flickering effect. I had to add a second identical image on top of the first, and alternate between the two: imageA loads source1, imageB loads source2, imageA loads source3, ImageB loads source4...
Mission completed, with duct tape.

Related

Codename One - how to use onTitleScrollAnimation with BorderLayout?

as the Toolbar or Titlearea on scroll animation feature is referenced in the last section of the Toolbar API, and also in this great video tutorial (starting at about min 45), the animation works well under given circumstances.
I was not able to find any documentation about what these have to be, however I found one circumstance, in which it does not work. Here is a working example to demonstrate the problem:
Form hi = new Form("Title", new BoxLayout(BoxLayout.Y_AXIS));
EncodedImage placeholder = EncodedImage
.createFromImage(Image.createImage(hi.getWidth(), hi.getWidth() / 5, 0xffff0000), true);
URLImage background = URLImage.createToStorage(placeholder, "400px-AGameOfThrones.jpg",
"http://awoiaf.westeros.org/images/thumb/9/93/AGameOfThrones.jpg/400px-AGameOfThrones.jpg");
background.fetch();
Style stitle = hi.getToolbar().getTitleComponent().getUnselectedStyle();
stitle.setBgImage(background);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(15);
// hi.setLayout(new BorderLayout()); // uncomment this for the animation to break
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(contentContainer);
// hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(anim);
hi.show();
With my current app and the codesample from the Toolbar API (which is roughly adapted here), I found out that the onScrollAnimation event is not being called, when a scroll occurs inside a BorderLayout. Even when I have a separate container, which is not the contentpane itself, and I set setScrollableY(true); to true, the animation works properly. The animation stops working, when this very container is put into Center of the Form, via Borderlayout. in the example above, the layout is exactly the same, as there are no other components in other areas of course, but it breaks the animation.
How to solve this? In my app, I have the need for a BorderLayout but still want to use this cool feature. Also, this is a very un-intuitive feature, if it works for some, but not all layouts. It should be completely layout-agnostic and work in every case.
Thank you.
The adapter is bound to the forms content pane scrolling so it won't work if you have a border layout in here. In that case scrolling isn't detected because the code just isn't aware of the scrolling. It would need to track the scrolling of any component in the UI to detect that scrolling.
as hinted by Shai, the solution is the following:
hi.setLayout(new BorderLayout());
Container contentContainer = new Container(BoxLayout.y());
contentContainer.setScrollableY(true);
// add some elements so we have something to scroll
for (int i = 0; i < 50; i++)
contentContainer.add(new Label("Entry " + i));
hi.add(BorderLayout.CENTER, contentContainer); // use this line instead of the above for the animation to break
ComponentAnimation anim = hi.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
hi.getAnimationManager().onTitleScrollAnimation(contentContainer, anim);
instead of using the onTitleScollAnimation to just add the animation, provide your own scrollable "body" or content container as the first argument, appended by the animation(s).

CocosSharp game on Android startup takes a long time to draw graphics

We have a somewhat simple game written using CocosSharp. The game is within another Xamarin.Forms app. When the player clicks to play the game, we bring them to a splash screen. On iOS this screen displays immediately but on Android, the screen is just black for about 15 seconds. The music plays pretty much immediately on both platforms.
The following is called from the ViewCreated event of the CocosSharpView.
InitializeAudio();
var scene = new Scenes.SplashScene(GameView);
GameView.RunWithScene(scene);
The hang up seems to be when creating labels. The following take ~10 seconds to complete with 99% of it being in the constructor of the first label. We call our CreateText in the constructor.
private void CreateText()
{
var label = new CCLabel("Text 1", "BD_CARTOON_SHOUT.TTF", 80)
{
PositionX = layer.ContentSize.Width / 2.0f,
PositionY = layer.ContentSize.Height / 1.5f,
Color = CCColor3B.DarkGray
};
layer.AddChild(label);
label = new CCLabel("Text 2", "BD_CARTOON_SHOUT.TTF", 60)
{
PositionX = layer.ContentSize.Width / 2.0f,
PositionY = 50f,
Color = CCColor3B.DarkGray
};
layer.AddChild(label);
}
Keep in mind this only happens on Android.
Thanks in advance!
I had the same issue several weeks ago. The problem was CCLabel constructor
where it didn't know which type of font are you using and therefore trying all other types before finally trying the last one which is correct. You need to specify font type in CCLabel constructor like this:
var label = new CCLabel("Text 1", "BD_CARTOON_SHOUT.TTF", 80, CCLabelFormat.SystemFont);
Hope it helps.

Out of memory error when reloading activity several times

I am developping an app that has a main activity showing the app title (two animated imageviews overlayed), two animated pictures, also overlayed, and three buttons. This activity also has a background image, which is the same that is used by the other activities.
The app flows from one activity to another and, eventually, this main activity is launched again (with the FLAG_ACTIVITY_CLEAR_TOP). Everything works fine but, after reloading it several times, an Out Of Memory error happens on my Android 2.1 device.
At first, I had all the images in the drawable folder and the problem appeared after reaching the main activity 5 times. Then, I adjusted the bitmap sizes and put them in the approppriate folders depending on the density and the problem appeared after reaching the main activity 14 times. Now, I just removed the background image for test purposes and the Out Of Memory appears after more than 20 re-launches.
Also, if I press the Home button and then switch back to my app, the problem seems not to appear until much later.
Moreover, I tested the app in a Nexus 5 and the Out Of Memory never happens.
So... is that a problem with my phone? with Android 2.1?
Thanks!
[EDIT]
I think that I have located the problem but, still, strange behavior.
For example, at one point, I need to recreate the activity. As the "recreate" method is not available for my min API level (7), I do it as follows:
Intent refresh = new Intent(getActivity(), getActivity().getClass());
refresh.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(refresh);
Which, I think, is correct. I release the onClickListeners and clear the animations in onStop(). However, if I put a breakpoint in onStop(), it is not called when I expect it to happen. Sometimes it is called as soon as the activity is recreated but sometimes it is called several seconds later.
However, if I press the Home button, onStop is properly called and when I switch back to the application everything works fine.
The easiest solution is to add in manifest under application tag
android:largeHeap="true"
But this is won't solve your problem, just delay it to a few more rounds
This link will help you to analyze your application and see what cause this:
http://blogs.innovationm.com/android-out-of-memory-error-causes-solution-and-best-practices/
My Guess this is related to images because i had this issue also..
The android official link to this problem is:
http://developer.android.com/training/displaying-bitmaps/index.html
This the link that helped me.. Try it out
http://developer.android.com/training/displaying-bitmaps/load-bitmap.html
Hope that helps
check this outLoading Large Bitmaps Efficiently
Read Bitmap Dimensions and Type
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(getResources(), R.id.myimage, options);
int imageHeight = options.outHeight;
int imageWidth = options.outWidth;
String imageType = options.outMimeType;
Load a Scaled Down Version into Memory
public static int calculateInSampleSize(
BitmapFactory.Options options, int reqWidth, int reqHeight) {
// Raw height and width of image
final int height = options.outHeight;
final int width = options.outWidth;
int inSampleSize = 1;
if (height > reqHeight || width > reqWidth) {
final int halfHeight = height / 2;
final int halfWidth = width / 2;
// Calculate the largest inSampleSize value that is a power of 2 and keeps both
// height and width larger than the requested height and width.
while ((halfHeight / inSampleSize) >= reqHeight
&& (halfWidth / inSampleSize) >= reqWidth) {
inSampleSize *= 2;
}
}
return inSampleSize;
}
public static Bitmap decodeSampledBitmapFromResource(Resources res, int resId,
int reqWidth, int reqHeight) {
// First decode with inJustDecodeBounds=true to check dimensions
final BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds = true;
BitmapFactory.decodeResource(res, resId, options);
// Calculate inSampleSize
options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);
// Decode bitmap with inSampleSize set
options.inJustDecodeBounds = false;
return BitmapFactory.decodeResource(res, resId, options);
}
imageView.setImageBitmap(
decodeSampledBitmapFromResource(getResources(), R.id.myimage, 100, 100));

Live tile image not updating on time

So in short, my issue is that the background image for my Live Tile is not being updated.
I know that the correct image is in Isolated Storage, and I also know that it is being set as the image for the tile, however only the tile sizes not currently being viewed update. For the tile size currently being used to update, the user has to cycle through the tile sizes several times. I assume the issue is something to do with a tile cache being constructed, and not easily being cleared. However, I have tried a few different methods to clear it - clearing all properties on the tile, setting unique filenames for each icon, and none have worked - I'm still forced to either cycle through the tiles or unpin and repin for the icon to update.
Are there any solutions or workarounds for this to force an update?
EDIT: The code I am using is:
Canvas canvasIcon = DrawCanvas(100, 172, 30, 30, brushWhite, brushWhite, PenLineCap.Square, 10);
WriteableBitmap wbIcon = new WriteableBitmap(canvasIcon, null);
wbIcon.Invalidate();
var stream = new IsolatedStorageFileStream("Shared/ShellContent/icon.png", FileMode.OpenOrCreate, isoStore);
wbIcon.WritePNG(stream);
stream.Close();
IconicTileData iconicTile = new IconicTileData() {
SmallIconImage = new Uri("isostore:/Shared/ShellContent/smallicon.png", UriKind.Absolute),
Title = "Placeholder",
IconImage = new Uri("isostore:/Shared/ShellContent/icon.png", UriKind.Absolute)
};
ShellTile tile = ShellTile.ActiveTiles.First();
tile.Update(iconicTile);

IKImageView issue on 10.5.8

I am using Monobjc and Mono to develop an application where the user can zoom in on images. The very first image shows up fine. But when the user navigates to the next image, it shows up blank with a white background. And the subsequent images also show up blank. Now when the same app is executed on 10.6 and 10.7, the images show up perfectly.
There is no additional code that I have written for setting up IKImageView. It is set up in InterfaceBuilder but that's pretty much it.
My code is -
//ImgeData is the binary format of the image.
NSData data = new NSData(ImageData);
NSBitmapImageRep imageRep = new NSBitmapImageRep(data);
NSImage image = new NSImage(new NSSize(imageRep.PixelsWide, imageRep.PixelsHigh));
image.AddRepresentation(imageRep);
image.Retain();
NSData imgDat = image.TIFFRepresentation;
if(imgDat != null)
{
var imgSrc = CGImageSource.CreateWithData(imgDat, null);
var imgRef = CGImageSource.CreateImageAtIndex(imgSrc, 0, null);
if (_ikImageView == null)
{
return;
}
_ikImageView.SetImageImageProperties(imgRef,null);
CGImage.Release(imgRef);
}
UPDATE - I realized that I can see the hand over the blank area. Is it possible the image has gotten hidden ?.
MORE Update - My Window contains NSView which inturn contains IKImageView. Now the entire IKImageView is replaced with a white patch. But if I move the mouse over the area, I see a hand coming up. This tells me that the image is getting rendered but IKImageView is not able to display itself.

Resources