Lottieanimationview Size Won't Change/Is Too Small (Ios/Swift)

LottieAnimationView size won't change/is too small (iOS/Swift)

The problem was with the file I downloaded from LottieFiles. To fix the animation/icon from being small, I scaled the composition size in adobe after effects to fit the preview frame. I exported the .aeb file to .json using the bodymovin plugin.

Hardik's answer was also helpful. The problem was simply that the file I downloaded had a lot of empty space around the actual icon until I scaled the picture up.

Change Lottie AnimationView size in Swift 5

Since you are giving its own constraint manually, you forgot to disable (set it to false) translatesAutoresizingMaskIntoConstraints, try with this:

@objc func showAnimationTapped(){
    let logoAnimation = AnimationView(name: "StrokeAnimation")
    logoAnimation.contentMode = .scaleAspectFit
    logoAnimation.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(logoAnimation)

    logoAnimation.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    logoAnimation.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    logoAnimation.heightAnchor.constraint(equalToConstant: 200).isActive = true
    logoAnimation.widthAnchor.constraint(equalToConstant: 200).isActive = true

    logoAnimation.play()
}

Remember, if translatesAutoresizingMaskIntoConstraints is set to true (which is by default), the system automatically creates a set of constraints based on the view’s frame and its autoresizing mask, but you don't want that, you clearly want to set your own constraints as you did in code.

Side note: be aware of the fact that showAnimationTapped() might be called many times, and you don't want to keep adding a logoAnimation view each time, otherwise it will make your UI performance worst. Maybe you can put it in a computed var, add it and show/hide it or just put it in a computed var and add/remove it.

After Effects animation loaded with Lottie not playing

Try calling .play() in viewDidAppear

After Effects animation loaded with Lottie not playing

Try calling .play() in viewDidAppear

Is it possible to recolor a lottie animation programmatically?

I figured it out. For this example, let's say I want to recolor a specific layer to Color.RED.

You'll need your LottieAnimationView, a KeyPath, and a LottieValueCallback

private LottieAnimationView lottieAnimationVIew;
private KeyPath mKeyPath;
private LottieValueCallback<Integer> mCallback;

Then in your onCreate (or onViewCreated for a fragment) you'll get the animation with findViewById, as well as "addLottieOnCompositionLoadedListener" to the lottieAnimationView, in which you will setup the "mKeyPath" and "mCallback":

lottieAnimationVIew = findViewById(R.id.animationView);

lottieAnimationView.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() {
  @Override
  public void onCompositionLoaded(LottieComposition composition) {
    mKeyPath = getKeyPath(); // This is your own method for getting the KeyPath you desire. More on that below.
    mCallback = new LottieValueCallback<>();
    mCallback.setValue(Color.RED);
    checkBox.addValueCallback(mKeyPath, LottieProperty.COLOR, mCallback);
  }
});

The argument "LottieProperty.COLOR" specifies which property I am changing.

There's probably a better way to do this, but here's my "getKeyPath" method for finding the specific thing I want to change. It will log every KeyPath so you can see which one you want. Then it returns it once you've supplied the correct index. I saw that the one I want is the 5th in the list, hence the hard-coded index of 4.

private KeyPath getKeyPath() {
  List<KeyPath> keyPaths = lottieAnimationView.resolveKeyPath(new KeyPath("Fill", "Ellipse 1", "Fill 1"));
        
  for (int i = 0; i < keyPaths.size(); i++) {
    Log.i("KeyPath", keyPaths.get(i).toString());
  }
        
  if (keyPaths.size() == 5) {
    return keyPaths.get(4);
  }
  else {
    return null;
  }
}

Note that the "Fill", "Ellipse 1", "Fill 1" are strings I supplied to narrow the list down to just the ones that have those keys, because I know that the layer I want will be among those. There's likely a better way to do this as well.

Lottie animation has large padding. How to resize the animation to the view, by removing the padding

I think there are two "semi"-solutions right now:

1. install Bodymovin on Adobe After Effects, then import the animation and set its scale to e.g. 500%.
2. Scale the Lottie animation view not by Lottie scale, but by using ScaleX, ScaleY:

XML:

android:scaleX="5"
android:scaleY="5"

Programmatically:

view.setScaleX(5f);
view.setScaleY(5f);

---

Related Topics