Saturday, November 2, 2013

Create simple animations in apps using the animation library in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Create-4ea581ba
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "SimpleSPAnimationDemo"
SimpleSPAnimationDemo -> Content -> Add existing item -> add 'Photo.png'
SimpleSPAnimationDemo -> Pages -> Default.aspx
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    <div id="toolbar">
        <input type="button" id="cmdHidePhoto" value="Hide Photo" />
        <input type="button" id="cmdShowPhoto" value="Show Photo" />
        <input type="button" id="cmdEnlargePhoto" value="Enlarge Photo" />
        <input type="button" id="cmdChangeOpacity" value="Change Opacity" />
    </div>
    <div>
        <img id="photo1" src="../Content/photo.jpg" />
    </div>

</asp:Content>
SimpleSPAnimationDemo -> Scripts -> App.js
'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    $("#cmdHidePhoto").click(onHidePhoto);
    $("#cmdShowPhoto").click(onShowPhoto);
    $("#cmdEnlargePhoto").click(onEnlargePhoto);
    $("#cmdChangeOpacity").click(onChangeOpacity);
    getUserName();
});

function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

function onHidePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeOut(photo1);
}

function onShowPhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.FadeIn(photo1);
}

function onEnlargePhoto() {
    var photo1 = document.getElementById("photo1");
    SPAnimationUtility.BasicAnimator.Resize(photo1, 500, 500);
}

function onChangeOpacity() {

    var photo1 = document.getElementById("photo1");

    var state = new SPAnimation.State();
    state.SetAttribute(SPAnimation.Attribute.Opacity, 0.2);
    var animation = new SPAnimation.Object(SPAnimation.ID.Basic_Opacity, 500, photo1, state);

    animation.RunAnimation();

}

Thank You

No comments:

Post a Comment

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts